/* Design tokens of « AIOS · Pilotage ».
   Source: the cockpit design system (Ink + Paper + Clay), /var/www/cockpit/public/assets/css/main.css and
   docs/UI-DESIGN-SYSTEM.md, as in production on 29/09/2026. Values are copied, not reinvented: keep them in step
   with cockpit. The local choices, all deliberate:
   - the monospace stack (system fonts, for the weight budget) and the layout tokens of this app (bars, panel);
   - explicit *-text tokens for status texts on their tinted backgrounds (cockpit sets them per component);
   - in dark mode, --border (#3F3F46), --border-strong (#52525B) and --text-mute (#A1A1AA) are raised above
     cockpit's values so that borders reach 3:1 and muted text 4.5:1 on the dark surfaces (WCAG 2.2 AA).
   Every colour, spacing, radius, shadow and duration of the app comes from here. */

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* Fallback metrics close to Satoshi: no layout shift when the web font arrives. */
@font-face {
    font-family: 'Satoshi Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 101%;
    ascent-override: 97%;
    descent-override: 25%;
    line-gap-override: 0%;
}

:root {
    color-scheme: light;

    /* — Typography ------------------------------------------------------------ */
    --font-sans:    'Satoshi', 'Satoshi Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-display: var(--font-sans);
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --text-2xs:  clamp(0.68rem, 0.65rem + 0.15vw, 0.72rem);
    --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem);
    --text-sm:   clamp(0.85rem, 0.82rem + 0.15vw, 0.9rem);
    --text-base: 1rem;
    --text-lg:   clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
    --text-xl:   clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
    --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.8rem);
    --text-3xl:  clamp(1.85rem, 1.5rem + 1.5vw, 2.4rem);
    --text-4xl:  clamp(2.25rem, 1.8rem + 2.2vw, 3.2rem);
    --text-5xl:  clamp(2.75rem, 2rem + 3.5vw, 4.5rem);

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-base:  1.55;
    --leading-loose: 1.75;

    --tracking-tight:  -0.02em;
    --tracking-snug:   -0.01em;
    --tracking-base:    0;
    --tracking-wide:    0.02em;
    --tracking-widest:  0.18em;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* — Spacing (8px base) ------------------------------------------------------ */
    --space-px: 1px;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* — Palette: Ink + Paper + Clay ---------------------------------------------- */
    --paper:      #FFFFFF;
    --paper-soft: #FAFAF9;
    --paper-dim:  #F5F5F4;

    --ink-50:  #FAFAFA;
    --ink-100: #F4F4F5;
    --ink-200: #E4E4E7;
    --ink-300: #D4D4D8;
    --ink-400: #A1A1AA; /* decorative only (2.56:1 on paper): never for text */
    --ink-450: #737378; /* AA body text (4.72:1 on paper) */
    --ink-500: #71717A;
    --ink-600: #52525B;
    --ink-700: #3F3F46;
    --ink-800: #27272A;
    --ink-900: #18181B;
    --ink-950: #0A0A0B;

    /* Accent: Clay / Terracotta */
    --clay-50:  #FEF7F0;
    --clay-100: #FBE9D7;
    --clay-200: #F6CFA8;
    --clay-300: #EFAC74;
    --clay-400: #E5824A;
    --clay-500: #C2410C;
    --clay-600: #9A3412;
    --clay-700: #7C2D12;
    --clay-800: #5C1F0D;
    --clay-900: #3F1208;

    /* Blueprint blue (secondary) */
    --blue-50:  #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-500: #2563EB;
    --blue-600: #1D4ED8;
    --blue-700: #1E40AF;
    --blue-900: #172554;

    /* — Semantic ------------------------------------------------------------------ */
    --bg:          var(--paper-soft);
    --bg-elevated: var(--paper);
    --bg-sunken:   var(--paper-dim);
    --bg-canvas:   #FBFBFA;

    --border:        var(--ink-400);
    --border-strong: var(--ink-500);
    --border-subtle: var(--ink-200);

    --text:           var(--ink-900);
    --text-soft:      var(--ink-700);
    --text-dim:       #5E5E63;
    --text-mute:      var(--ink-450);
    --text-on-sunken: var(--ink-600);
    --text-invert:    var(--paper);

    --accent:       var(--clay-500);
    --accent-hover: var(--clay-600);
    --accent-soft:  var(--clay-100);
    --accent-text:  var(--clay-700);

    --success:        #15803D;
    --success-bg:     #DCFCE7;
    --success-border: #86EFAC;
    --success-text:   #166534;
    --warning:        #B45309;
    --warning-bg:     #FEF3C7;
    --warning-border: #FCD34D;
    --warning-text:   #92400E;
    --error:          #B91C1C;
    --error-bg:       #FEE2E2;
    --error-border:   #FCA5A5;
    --error-text:     #991B1B;
    --info:           #1D4ED8;
    --info-bg:        #DBEAFE;
    --info-border:    #93C5FD;
    --info-text:      #1E40AF;

    --on-success: #FFFFFF;
    --on-warning: #FFFFFF;
    --on-error:   #FFFFFF;
    --on-accent:  #FFFFFF;

    /* — Shape ------------------------------------------------------------------ */
    --radius-xs:   3px;
    --radius-sm:   4px;
    --radius:      6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;

    --border-width:       1px;
    --border-width-thick: 2px;

    /* — Shadows (soft layered) ----------------------------------------------------- */
    --shadow-xs:    0 1px 1px rgba(10, 10, 11, 0.04);
    --shadow-sm:    0 1px 2px rgba(10, 10, 11, 0.05), 0 1px 1px rgba(10, 10, 11, 0.03);
    --shadow-md:    0 4px 12px rgba(10, 10, 11, 0.06), 0 2px 4px rgba(10, 10, 11, 0.04);
    --shadow-lg:    0 12px 24px rgba(10, 10, 11, 0.08), 0 4px 8px rgba(10, 10, 11, 0.05);
    --shadow-xl:    0 24px 48px rgba(10, 10, 11, 0.12), 0 8px 16px rgba(10, 10, 11, 0.06);
    --shadow-2xl:   0 48px 96px rgba(10, 10, 11, 0.15);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(10, 10, 11, 0.04);
    --ring-focus:      0 0 0 3px rgba(194, 65, 12, 0.18);
    --ring-focus-blue: 0 0 0 3px rgba(37, 99, 235, 0.2);
    --focus-outline:   2px solid var(--accent);

    /* — Motion ------------------------------------------------------------------ */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-instant: 60ms;
    --dur-fast:    120ms;
    --dur:         180ms;
    --dur-slow:    320ms;
    --dur-slower:  520ms;
    --dur-pulse:   2s;
    --dur-spin:    0.7s;
    --dur-shimmer: 1.4s;
    --dur-reduced: 0.01ms;

    /* — Layout ------------------------------------------------------------------ */
    --topbar-h:      64px;
    --content-max:   1280px;
    --content-prose: 720px;

    /* Local to this app */
    --tabbar-h:   64px;
    --sidebar-w:  248px;
    --sidebar-w-compact: 72px;
    --panel-w:    min(560px, 46vw);
    --touch-min:  44px;
    --z-sticky:   10;
    --z-panel:    20;
    --z-sheet:    30;
    --z-toast:    40;
    --z-palette:  50;
    --z-raise:    1;       /* stacking inside a component: an action above a card's stretched link */
    --card-min:   16rem;   /* narrowest card of the auto-fill grids (sessions, chantiers, programmes) */
    --aside-w:    22rem;   /* side column of the home on wide screens (« Pour vous ») */
    --console-h:  22rem;   /* viewport of a live console: about fourteen lines, the context stays visible */
    --capture-h:  10rem;   /* height of a screenshot thumbnail (the width follows the capture's format) */
    --sheet-w:    34rem;   /* width of a dialog on the computer (a bottom sheet on the phone) */

    /* — Inverse surfaces (tooltips) ---------------------------------------------- */
    --bg-inverse:      var(--ink-950);
    --text-on-inverse: var(--paper);

    /* — Architectural gradients ------------------------------------------------ */
    --grad-canvas: radial-gradient(1200px 600px at 20% -10%, rgba(194, 65, 12, 0.04), transparent 60%),
                   radial-gradient(800px 400px at 100% 20%, rgba(37, 99, 235, 0.03), transparent 60%);
    --grad-hero:   linear-gradient(135deg, #18181B 0%, #27272A 50%, #3F3F46 100%);
    --grad-clay:   linear-gradient(135deg, var(--clay-500), var(--clay-600));
    --grad-paper:  linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
}

/* Dark theme: follows the system, or Telegram through data-theme="dark" (same values as cockpit's dark block). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper:      #0D0D0E;
        --paper-soft: #0A0A0B;
        --paper-dim:  #18181B;

        --bg:          #0A0A0B;
        --bg-elevated: #18181B;
        --bg-sunken:   #050506;
        --bg-canvas:   #0F0F10;

        --border:        #3F3F46;
        --border-strong: #52525B;
        --border-subtle: #27272A;

        --text:           #FAFAFA;
        --text-soft:      #E4E4E7;
        --text-dim:       #A1A1AA;
        --text-mute:      #A1A1AA;
        --text-on-sunken: #A1A1AA;

        --accent:       #ED824A;
        --accent-hover: #F4AC74;
        --accent-soft:  rgba(237, 130, 74, 0.12);
        --accent-text:  #F4AC74;

        --on-accent:  var(--ink-900);

        --success-bg:     rgba(34, 197, 94, 0.15);
        --success-border: rgba(74, 222, 128, 0.30);
        --success-text:   #86EFAC;
        --warning-bg:     rgba(245, 158, 11, 0.15);
        --warning-border: rgba(251, 191, 36, 0.30);
        --warning-text:   #FCD34D;
        --info-bg:        rgba(59, 130, 246, 0.18);
        --info-border:    rgba(96, 165, 250, 0.32);
        --info-text:      #93C5FD;
        --error-bg:       rgba(239, 68, 68, 0.15);
        --error-border:   rgba(248, 113, 113, 0.32);
        --error-text:     #FCA5A5;

        --shadow-xs:  0 1px 1px rgba(0, 0, 0, 0.3);
        --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
        --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.6);
        --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.7);
        --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
        --ring-focus: 0 0 0 3px rgba(237, 130, 74, 0.28);

        --ink-100: #27272A;
        --ink-200: #3F3F46;

        --bg-inverse:      #F4F4F5;
        --text-on-inverse: #18181B;

        --grad-canvas: radial-gradient(1200px 600px at 20% -10%, rgba(237, 130, 74, 0.08), transparent 60%),
                       radial-gradient(800px 400px at 100% 20%, rgba(37, 99, 235, 0.05), transparent 60%);
        --grad-paper:  linear-gradient(180deg, #18181B 0%, #0D0D0E 100%);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --paper:      #0D0D0E;
    --paper-soft: #0A0A0B;
    --paper-dim:  #18181B;

    --bg:          #0A0A0B;
    --bg-elevated: #18181B;
    --bg-sunken:   #050506;
    --bg-canvas:   #0F0F10;

    --border:        #3F3F46;
    --border-strong: #52525B;
    --border-subtle: #27272A;

    --text:           #FAFAFA;
    --text-soft:      #E4E4E7;
    --text-dim:       #A1A1AA;
    --text-mute:      #A1A1AA;
    --text-on-sunken: #A1A1AA;

    --accent:       #ED824A;
    --accent-hover: #F4AC74;
    --accent-soft:  rgba(237, 130, 74, 0.12);
    --accent-text:  #F4AC74;

    --on-accent:  var(--ink-900);

    --success-bg:     rgba(34, 197, 94, 0.15);
    --success-border: rgba(74, 222, 128, 0.30);
    --success-text:   #86EFAC;
    --warning-bg:     rgba(245, 158, 11, 0.15);
    --warning-border: rgba(251, 191, 36, 0.30);
    --warning-text:   #FCD34D;
    --info-bg:        rgba(59, 130, 246, 0.18);
    --info-border:    rgba(96, 165, 250, 0.32);
    --info-text:      #93C5FD;
    --error-bg:       rgba(239, 68, 68, 0.15);
    --error-border:   rgba(248, 113, 113, 0.32);
    --error-text:     #FCA5A5;

    --shadow-xs:  0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.7);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    --ring-focus: 0 0 0 3px rgba(237, 130, 74, 0.28);

    --ink-100: #27272A;
    --ink-200: #3F3F46;

    --bg-inverse:      #F4F4F5;
    --text-on-inverse: #18181B;

    --grad-canvas: radial-gradient(1200px 600px at 20% -10%, rgba(237, 130, 74, 0.08), transparent 60%),
                   radial-gradient(800px 400px at 100% 20%, rgba(37, 99, 235, 0.05), transparent 60%);
    --grad-paper:  linear-gradient(180deg, #18181B 0%, #0D0D0E 100%);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: var(--dur-reduced);
        --dur-fast:    var(--dur-reduced);
        --dur:         var(--dur-reduced);
        --dur-slow:    var(--dur-reduced);
        --dur-slower:  var(--dur-reduced);
    }
}