/* =====================================================================================================================
   MasterIT design tokens — the ONLY file where a raw color, font, size or shadow is written (DESIGN.md DS-01).
   Source: the MasterIT brand guide (charte graphique) — primary #47B368, secondary #857778 #D1B7A3 #CEFBB9 #B386FB
   #3F3F3F, titles Avenir Next, body Calibri.
   Light by default, dark with the system setting; force a theme with <html data-theme="light"> or "dark".
   ===================================================================================================================== */

:root {
    color-scheme: light dark;

    /* Brand — the brand guide's colors, exact and the same in both themes: logo, fills, illustrations, print.
       Too light for text on white (#47B368 is 2.65:1): text and buttons use the --accent* tokens below. */
    --brand-green: #47b368;
    --brand-mint: #cefbb9;
    --brand-taupe: #857778;
    --brand-sand: #d1b7a3;
    --brand-violet: #b386fb;
    --brand-graphite: #3f3f3f;
    --brand-green-deep: #1f6b39;       /* darkest step of the brand green, for --gradient-brand */
    --brand-paper: #ffffff;            /* fixed light background for logo samples, print, social images */
    --on-brand: #ffffff;               /* text on --gradient-brand (≥ 5.3:1) */

    /* Code & terminal — always dark, in both themes */
    --code-bg: #1e1f1e;
    --code-header: #2a2b2a;
    --code-text: #e8eae7;
    --code-muted: #8f978d;
    --code-green: #7fd99a;
    --code-violet: #c6a8ff;
    --code-sand: #e3c9b5;

    /* Surfaces & text */
    --bg: #f7f8f6;
    --surface: #ffffff;
    --surface-hover: #f1f4ef;
    --surface-sunken: #eef1ec;
    --border: #dfe3dc;
    --text: #3f3f3f;                   /* brand graphite */
    --text-muted: #6f6263;             /* brand taupe, darkened to pass 4.5:1 */

    /* Actions */
    --accent: #2b7a45;                 /* brand green, deepened to pass 4.5:1 with white */
    --accent-hover: #1f6b39;
    --accent-text: #ffffff;
    --accent-soft: #e7fcdc;            /* brand mint, lightened */
    --accent-2: #7a4fd0;               /* brand violet, deepened for text */

    /* Status */
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --info: #0369a1;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--brand-green-deep) 0%, #2b7a45 100%);   /* fixed: --on-brand ≥ 5.3:1 in both themes */
    --gradient-text: linear-gradient(90deg, var(--accent) 0%, #3a9a57 100%);

    /* Text on a photo — fixed in both themes: the overlay keeps the photo dark enough for --on-brand (≥ 4.5:1) */
    --overlay-image: linear-gradient(rgb(20 22 20 / 0.82), rgb(20 22 20 / 0.82));
    --overlay-image-wide: linear-gradient(90deg, rgb(20 22 20 / 0.92) 0%, rgb(20 22 20 / 0.8) 55%, rgb(20 22 20 / 0.35) 100%);
    --on-image-muted: #d6dbd4;
    --gradient-on-image: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-mint) 100%);

    /* Typography — the brand fonts when installed, then free look-alikes, then system fonts (DESIGN.md § Fonts) */
    --font-heading: "Avenir Next", "Avenir Next LT Pro", Avenir, "Nunito Sans", "Segoe UI", system-ui, sans-serif;
    --font-sans: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1.0625rem;           /* Calibri runs small: 17px reads like 16px elsewhere */
    --text-lg: 1.1875rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 600;                /* Avenir Next Demi; synthesized or 600 in the fallbacks */

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;

    /* Spacing — 4px steps */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Shape & depth */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 999px;
    --shadow-sm: 0 1px 2px rgb(31 41 31 / 0.06);
    --shadow: 0 4px 16px rgb(31 41 31 / 0.08);
    --shadow-lg: 0 12px 40px rgb(31 41 31 / 0.12);

    /* Layout */
    --container: 72rem;
    --container-wide: 90rem;
    --sidebar-width: 15rem;
    --container-narrow: 42rem;
    --header-height: 4.5rem;

    /* Motion */
    --duration: 150ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --duration-slow: 700ms;                      /* entrances (hero on load) */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* fast start, long soft landing */
    --reveal-distance: 1.5rem;                   /* how far an element rises as it appears */
}

/* Dark theme — the brand guide's dark backgrounds are graphite; the exact brand green passes on them (5.7:1).
   Written twice: once for the system setting, once for an explicit data-theme="dark". */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #262626;
        --surface: #303030;
        --surface-hover: #383838;
        --surface-sunken: #1e1e1e;
        --border: #484848;
        --text: #ededed;
        --text-muted: #b0a5a6;
        --accent: #47b368;
        --accent-hover: #5cc47c;
        --accent-text: #1f1f1f;
        --accent-soft: #2a3f2f;
        --accent-2: #c6a8ff;
        --success: #4ade80;
        --warning: #fbbf24;
        --danger: #f87171;
        --info: #38bdf8;
        --gradient-text: linear-gradient(90deg, var(--accent) 0%, var(--brand-mint) 100%);
        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow: 0 4px 16px rgb(0 0 0 / 0.4);
        --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.5);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #262626;
    --surface: #303030;
    --surface-hover: #383838;
    --surface-sunken: #1e1e1e;
    --border: #484848;
    --text: #ededed;
    --text-muted: #b0a5a6;
    --accent: #47b368;
    --accent-hover: #5cc47c;
    --accent-text: #1f1f1f;
    --accent-soft: #2a3f2f;
    --accent-2: #c6a8ff;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #38bdf8;
    --gradient-text: linear-gradient(90deg, var(--accent) 0%, var(--brand-mint) 100%);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 4px 16px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.5);
}

:root[data-theme="light"] {
    color-scheme: light;
}