/* ============================================================================
   FLAIR ONE · DESIGN TOKENS
   Single source of truth. Every value used by a component comes from here.
   Sections: brand · canvas & text · semantic · Champ roles · surfaces · typography · spacing ·
   radii · motion · layout · z-index · charts
   Visual language: « Champ » — docs/design/DESIGN-CHAMP-SPEC.md. Every surface is opaque and
   flat: one surface, one hairline, one shadow for what floats (§ 3.3, § 12.1).
   ========================================================================== */

@font-face {
  font-family: "Rethink Sans";
  src: url("assets/rethink-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* ---- brand primitives (Flair One Brand System v1.0) --------------------- */
  --cobalt-50: #F0F4FF; --cobalt-100: #DCE5FF; --cobalt-200: #BACBFF; --cobalt-300: #90ABFC; --cobalt-400: #6488F3;
  --cobalt-500: #365DE5; --cobalt-600: #2948AF; --cobalt-700: #233C91; --cobalt-800: #203477; --cobalt-900: #182341;
  --coral-50: #FFF4F0; --coral-100: #FFE7DE; --coral-200: #FFD0BE; --coral-300: #F8AD92; --coral-400: #F1846B;
  --coral-500: #DA624B; --coral-600: #B74632; --coral-700: #943623; --coral-800: #752E21; --coral-900: #4E241D;
  --neutral-0: #FFFFFF; --neutral-50: #F7F8FB; --neutral-100: #EEF0F5; --neutral-200: #D9DEE8; --neutral-300: #BAC3D2;
  --neutral-400: #8491A8; --neutral-500: #65738B; --neutral-600: #4D5B73; --neutral-700: #35425A; --neutral-800: #253147; --neutral-900: #182341;

  /* ---- roles ------------------------------------------------------------- */
  --brand: var(--cobalt-500);
  --brand-strong: var(--cobalt-600);
  --brand-soft: var(--cobalt-50);
  --accent: var(--coral-400);
  --accent-soft: var(--coral-100);

  --ink: var(--neutral-900);
  --text: var(--neutral-900);
  --text-2: var(--neutral-700);
  --text-3: #5A6880; /* neutral-500 darkened: 4.8:1 on white and on the warm canvas */
  --text-inverse: #FFFFFF;
  --text-on-brand: #FFFFFF;
  --link: var(--cobalt-600);

  --canvas: #FBF8F5;                       /* warm off-white (owner decision § 11-a) — the page itself, no atmosphere */
  --surface: #FFFFFF;
  --surface-2: var(--neutral-50);
  --line: rgba(24, 35, 65, .10);
  --line-strong: rgba(24, 35, 65, .22);
  --line-control: var(--neutral-400);

  --focus: var(--cobalt-500);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--cobalt-500);
  --selected: var(--cobalt-50);
  --selected-text: var(--cobalt-600);
  --interactive: var(--cobalt-500);
  --disabled-bg: var(--neutral-100);
  --disabled-text: var(--neutral-400);

  --success: #166746; --success-bg: #EAF7F0;
  --warning: #87510B; --warning-bg: #FFF5DD;
  --danger: #B33235;  --danger-bg: #FFF0F0;
  --info: #2948AF;    --info-bg: #F0F4FF;
  --pending: #6442A1; --pending-bg: #F3EEFC;
  --neutral-status: var(--neutral-600); --neutral-status-bg: var(--neutral-100);

  /* ---- Champ roles (spec § 3.1) ------------------------------------------ */
  --spine: var(--cobalt-900);
  --spine-ink: #FFFFFF;
  --spine-muted: #C6CEE0;
  --spine-hover: rgba(255, 255, 255, .08);
  --spine-active: var(--coral-400);
  --spine-active-ink: var(--neutral-900);   /* dark text on coral: 6.09:1 */
  --field-bg: var(--cobalt-500);            /* the colour block; white text 5.45:1 */
  --field-ink: #FFFFFF;
  --field-pattern: url("assets/flow-cobalt.svg");
  --highlight: var(--coral-300);            /* low band under a key figure or word, dark text */
  --rule: var(--neutral-200);
  --rule-strong: var(--neutral-900);
  --late: #B33235;                          /* the only red ink: overdue */

  /* ---- surfaces: opaque and flat (spec § 3.3, § 12.1) --------------------- */
  --solid-data: var(--surface);
  --solid-document: #FFFFFF;
  --solid-high: #FFFFFF;
  --surface-hover: var(--neutral-50);       /* a clickable surface under the pointer: its fill changes, it never lifts */
  --surface-border: var(--neutral-200);
  --subtle-fill: rgba(24, 35, 65, .045);     /* a piece inside another surface (secondary button, chip) */
  --subtle-fill-hover: rgba(24, 35, 65, .08);
  --subtle-shadow: 0 6px 16px rgba(24, 35, 65, .048);
  --shadow-float: 0 2px 6px rgba(24, 35, 65, .08), 0 18px 44px rgba(24, 35, 65, .14);   /* only what floats casts a shadow */
  --action-fill: var(--brand);
  --action-fill-hover: var(--cobalt-600);
  --emphasis-rgb: 24, 35, 65;
  --emphasis: .14;
  --lift-rgb: 24, 35, 65;
  --depth-ink: 24, 35, 65;
  --depth: .6;
  --scrim-fill: rgba(24, 35, 65, .36);
  --drawer-scrim-fill: rgba(24, 35, 65, .3);

  /* ---- typography ---------------------------------------------------------- */
  --font: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-display: 600 44px/50px var(--font);
  --t-page-title: 600 32px/40px var(--font);
  --t-record-title: 600 24px/32px var(--font);
  --t-section-title: 600 20px/28px var(--font);
  --t-panel-title: 600 16px/24px var(--font);
  --t-body: 400 14px/20px var(--font);
  --t-body-lg: 400 16px/24px var(--font);
  --t-label: 500 13px/18px var(--font);
  --t-caption: 500 12px/16px var(--font);
  --t-meta: 500 12px/16px var(--font);
  --t-table: 400 14px/20px var(--font);
  --t-numeric: 500 14px/20px var(--font);
  --t-financial: 600 15px/20px var(--font);
  --t-code: 500 12px/16px var(--font-mono);
  /* Champ editorial sizes — mastheads and figures only, 700 is short emphasis (spec § 3.2) */
  --t-mast: 700 clamp(44px, 5.6vw, 80px) / .95 var(--font);
  --t-deck: 500 18px/28px var(--font);
  --t-figure-xl: 700 clamp(56px, 6vw, 88px) / .95 var(--font);
  --t-figure: 700 32px/40px var(--font);
  --tracking-mast: -.035em;
  --tracking-figure: -.02em;
  --tracking-title: -.015em;
  --tracking-display: -.025em;

  /* ---- spacing ------------------------------------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --page-pad: 16px;              /* around the shell */
  --page-gutter: 24px;           /* inside the content column */
  --section-gap: 24px;
  --panel-pad: 24px;
  --form-gap: 16px;
  --table-row: 48px;
  --table-row-compact: 40px;
  --header-gap: 20px;

  /* ---- radii --------------------------------------------------------------- */
  --r-panel: 16px;
  --r-dialog: 24px;
  --r-card: 16px;
  --r-inner: 12px;
  --r-nest: 12px;                /* a surface inset in a panel: concentric with 16 */
  --r-nested-inner: 8px;         /* a row inset in a card */
  --r-field: 8px;
  --r-chip: 6px;
  --r-sweep: 44px 12px 12px 12px;   /* the F-curve sweep: colour blocks, signature cards */
  --r-sweep-s: 20px 6px 6px 6px;    /* the small sweep: active spine tab, buttons, event chips */
  --r-pill: 999px;

  /* ---- controls ------------------------------------------------------------ */
  --control-h: 40px;
  --control-h-lg: 48px;
  --control-h-sm: 32px;
  --touch: 44px;

  /* ---- motion: one family per intent (durations), five easings ----------------------
     micro       80–120   hover surface, icon tint, focus ring
     fast        120–180  buttons, chips, tooltips, menus
     standard    180–240  popovers, status changes, list rows
     panel       220–320  cards, inspectors, quick preview
     drawer      280–380  side drawers, sheets
     dialog      220–300  dialogs, palette
     page        240–360  route content
     navigation  200–280  rail, indicators
     selection   140–200  tabs, segmented, switches
     reorder     200–260  list moves
     success     400–500  check draw, acknowledgement
     attention   500–700  one-shot emphasis
     chart       500–800  reveal on presentation / scope change
     loading     900–1400 shimmer, spinners (never analytical data) */
  --m-instant: 0ms;        /* no duration: a property that flips once a delay has passed (visibility) */
  --m-micro: 100ms;
  --m-fast: 150ms;
  --m-standard: 210ms;
  --m-panel: 260ms;
  --m-drawer: 320ms;
  --m-dialog: 260ms;
  --m-page: 280ms;
  --m-navigation: 240ms;
  --m-selection: 180ms;
  --m-reorder: 240ms;
  --m-success: 440ms;
  --m-attention: 600ms;
  --m-chart: 640ms;
  --m-loading: 1200ms;
  --m-thumb: 460ms;        /* Apple selection thumb travel (segmented, tabs, switch) */
  --m-transit: 720ms;      /* company switch: the run from → to */
  --m-highlight: 5s;       /* new-record highlight fades over five seconds */
  --m-ambient: 18s;        /* hero light shift: decorative, opt-in (prefs.motion), off under reduced motion */
  --t-hero: 600 clamp(38px, 5.4vw, 78px) / .98 var(--font);   /* the greeting: 78 at 1440, ~55 at 1024, 38 on a phone */
  --ease: cubic-bezier(.2, 0, 0, 1);              /* standard */
  --ease-enter: cubic-bezier(0, 0, .2, 1);        /* decelerate in */
  --ease-exit: cubic-bezier(.4, 0, 1, 1);         /* accelerate out */
  --ease-emphasized: cubic-bezier(.3, 0, 0, 1);   /* long, confident */
  --spring: cubic-bezier(.32, 1.12, .42, 1);      /* spring-lite: settles, never bounces */
  --spring-select: cubic-bezier(.3, 1.35, .45, 1); /* Apple selection thumb: one visible overshoot */
  --ease-out: var(--ease-enter); --ease-in: var(--ease-exit); /* legacy aliases */

  /* ---- layout -------------------------------------------------------------- */
  --spine-w: 88px;               /* Champ spine (spec § 4) */
  --rail-w: 300px;               /* the module panel behind « Tous les modules » */
  --rail-w-collapsed: 76px;
  --rail-w-current: var(--rail-w);
  --topbar-h: 52px;
  --w-reading: 72ch;
  --w-form: 720px;
  --w-record: 1180px;
  --w-workspace: 1600px;
  --bp-mobile: 767px;
  --bp-tablet: 1199px;

  /* ---- z-index ------------------------------------------------------------- */
  --z-wall: -2;
  --z-rail: 20;
  --z-topbar: 15;
  --z-dock: 30;
  --z-popover: 40;
  --z-drawer: 45;
  --z-dialog: 50;
  --z-toast: 60;
  --z-tooltip: 70;

  /* ---- charts (brand guide, distinct from semantic status) ----------------- */
  --chart-1: #365DE5; --chart-2: #087F82; --chart-3: #B74632; --chart-4: #7953BC; --chart-5: #9B6509; --chart-6: #526A87;
  --chart-grid: rgba(24, 35, 65, .12);
  --chart-axis: var(--neutral-600);
}

/* ---- dark theme: opaque dark surfaces, light text (the « nuit » theme is phase 2) ---- */
html.dark {
  --text: #EEF2FF; --text-2: #C5CEE8; --text-3: #9AA7C7; --ink: #EEF2FF;
  --link: #9DB8FF;
  --brand-strong: #9DB8FF; /* brand text on dark surfaces: 7.6:1 */
  --chart-axis: #C5CEE8; --chart-grid: rgba(255, 255, 255, .12);
  --canvas: #101A3A;
  --surface: #1A2547;
  --surface-2: #16203F;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .22);
  --line-control: rgba(255, 255, 255, .34);
  --selected: rgba(157, 184, 255, .16);
  --selected-text: #9DB8FF;
  --brand-soft: rgba(157, 184, 255, .16);
  --disabled-bg: rgba(255, 255, 255, .06);
  --disabled-text: #6C7A99;
  --success: #7ED3A6; --success-bg: rgba(126, 211, 166, .14);
  --warning: #F1C97A; --warning-bg: rgba(241, 201, 122, .14);
  --danger: #F5A3A3;  --danger-bg: rgba(245, 163, 163, .14);
  --info: #9DB8FF;    --info-bg: rgba(157, 184, 255, .14);
  --pending: #C9B3F5; --pending-bg: rgba(201, 179, 245, .14);
  --neutral-status: #C5CEE8; --neutral-status-bg: rgba(255, 255, 255, .08);
  --focus-ring: 0 0 0 2px #101A3A, 0 0 0 4px #9DB8FF;

  --surface-hover: #212D52;
  --subtle-fill: rgba(255, 255, 255, .06);
  --subtle-fill-hover: rgba(255, 255, 255, .1);
  --subtle-shadow: 0 6px 16px rgba(4, 8, 24, .072);
  --solid-data: var(--surface);
  --solid-document: #FFFFFF;
  --solid-high: #0E1630;
  --shadow-float: 0 2px 6px rgba(4, 8, 24, .35), 0 18px 44px rgba(4, 8, 24, .45);
  --chart-grid: rgba(255, 255, 255, .14);
  --chart-axis: #C5CEE8;
  --surface-border: rgba(255, 255, 255, .12);
  --depth-ink: 4, 8, 24;
  --depth: .9;
  --emphasis-rgb: 255, 255, 255;
  --emphasis: .14;
  --lift-rgb: 255, 255, 255;
  --scrim-fill: rgba(4, 8, 24, .55);
  --drawer-scrim-fill: rgba(4, 8, 24, .45);
  --rule: rgba(255, 255, 255, .12);
  --rule-strong: #EEF2FF;
  --late: #F5A3A3;
  /* the night theme (decision 11-e): the spine sits a step deeper than the page, coral stays the accent with dark text */
  --spine: #0A0F24;
  --spine-muted: #AEB8D2;
  --highlight: var(--coral-300);
  color-scheme: dark;
}