@plugin "flowbite/plugin";

@tailwind base;
@tailwind components;
@tailwind utilities;

@import './typo.css';
@import './widgets.css';
@import './components.css';
@import './container.css';
@import './form.css';
@import './menu.css';
@import './smart-ethic.css';
@import './modal-action.css';

:root{
    --shadow-mid: rgb(149, 149, 149);
    --shadow-low: rgb(194, 194, 194);
}

@layer base {
    body{
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        @apply text-dark text-sm;
        font-family: 'Inter', sans-serif;
    }

    main{
        @apply pb-8;
    }

    h1 {
        @apply text-4xl md:text-5xl font-bold;
        font-family: 'Zilla', sans-serif;
    }

    h2 {
        @apply text-2xl md:text-3xl font-bold;
        font-family: 'Zilla', sans-serif;
    }

    h3 {
        @apply text-xl md:text-2xl font-bold;
        font-family: 'Zilla', sans-serif;
    }

    h4 {
        @apply text-lg md:text-xl font-bold;
    }

    h5 {
        @apply font-semibold text-black
    }

    label {
        @apply text-sm font-medium;
    }


    table{
        @apply w-full text-left;
    }

    thead{
        @apply text-xs text-sm;
    }

    table thead tr th{
        @apply px-6 py-3 text-sm;
    }
    
    table tbody tr{
        @apply border-b items-center;
    }

    table tbody tr th, table tbody tr td{
        @apply px-6 py-2;
        width: min-content;
    }

    article{
        @apply p-4;
    }

    footer{
        @apply bg-dark-light;
    }

    sub{
        @apply z-[1];
    }
}


@layer utilities {

    .secondary-text {
        @apply text-secondary text-sm;
    }

    .gradient-text {
        @apply bg-gradient-to-r from-primary-light to-primary-dark text-transparent bg-clip-text;
    }

    .header-link {
        @apply text-secondary/80 hover:text-dark text-sm font-medium;
    }


    .shadow-5-5-5{
        box-shadow: 5px 5px 5px var(--shadow-mid);
    }
    
    .strong-shadow{
        box-shadow: 0px 2px 5px var(--shadow-mid);
    }

    .mid-shadow{
        box-shadow: 0px 4px 7px var(--shadow-low);
    }

    /* Barre de défilement */
    
    .scrollbar-thin{
        scrollbar-width: thin;
    }
}


@layer components {
    .dev-background-implementer{
        min-height: 100vh;
        background: linear-gradient(to bottom right, #DEFFE3, #B6FBB6);
    }

    /* Liens de navigation */
    .nav-link {
        @apply px-10 py-2 hover:border-b hover:border-primary hover:text-primary hover:font-bold;
    }

    .nav-link-active {
        @apply border-b border-primary font-bold text-primary;
    }

    .text-fields {
        background-color: #f9fafb; 
        border: 1px solid #d1d5db; 
        color: #111827; 
        font-size: 0.875rem;
        border-radius: 0.5rem; 
        display: block; 
        width: 100%; 
        padding: 0.625rem; 
    
    }

    /* Eléméents basiques */

    .dividing-line{
        @apply border-border my-2;
    }
}