/* RAED design tokens, copied from views/src/raed-design-system/tokens.css (the source of truth;
   change it there and copy it here). Used by v2-rachid.css; the rest of V2 moves over in step 3. */
/* RAED design tokens — v1, 2026-10-16.
   Two themes from one set of names: Papier (light, default) and Graphite (dark).
   Rule: each colour means one thing. Green = done / matched / primary action,
   amber = check this, red = missing or danger, blue = information. Gold is the logo only.
   Usage: put data-theme="dark" on <html> (or on any element) to switch that subtree. */

:root,[data-theme="light"]{
  color-scheme:light;
  /* ground and surfaces */
  --r-bg:#F6F4EF;          /* page ground: warm paper */
  --r-bg-sunk:#EEEBE4;     /* wells, table headers, code */
  --r-surface:#FFFFFF;     /* cards, panels, inputs */
  --r-surface-2:#FAF9F6;   /* hover on surface, zebra */
  --r-raised:#FFFFFF;      /* menus, toasts, dialogs */
  --r-line:#E4E0D7;        /* hairlines */
  --r-line-strong:#CFC9BC; /* input borders, dividers that must be seen */
  /* ink */
  --r-text-1:#15191A;
  --r-text-2:#575D63;
  --r-text-3:#868B91;
  --r-text-inverse:#FFFFFF;
  /* meaning */
  --r-accent:#0E7A5F;  --r-accent-hover:#0B6650; --r-accent-soft:#E2F1EB; --r-accent-ink:#FFFFFF; --r-accent-line:#A9D5C5;
  --r-warn:#9E5B00;    --r-warn-soft:#FBEFD8;    --r-warn-line:#EBCB92;
  --r-bad:#B42318;     --r-bad-soft:#FCEAE8;     --r-bad-line:#F0B8B2;
  --r-info:#2D5B8A;    --r-info-soft:#E6EEF7;
  --r-mark:#C9A24A;    /* the RAED flame only */
  /* depth: light leans on shadow */
  --r-shadow-1:0 1px 2px rgba(21,25,26,.06),0 1px 1px rgba(21,25,26,.04);
  --r-shadow-2:0 4px 14px rgba(21,25,26,.08),0 1px 3px rgba(21,25,26,.06);
  --r-shadow-3:0 18px 48px rgba(21,25,26,.16),0 4px 12px rgba(21,25,26,.08);
  --r-highlight:inset 0 0 0 0 transparent;
  --r-focus:0 0 0 3px color-mix(in srgb,var(--r-accent) 32%,transparent);
  --r-skeleton:#ECE9E2; --r-skeleton-shine:#F7F5F0;
  --r-scrim:rgba(21,25,26,.32);
}

[data-theme="dark"]{
  color-scheme:dark;
  --r-bg:#151618;
  --r-bg-sunk:#101113;
  --r-surface:#1C1D20;
  --r-surface-2:#222327;
  --r-raised:#27292D;
  --r-line:#2F3135;
  --r-line-strong:#404247;
  --r-text-1:#EDEDEE;
  --r-text-2:#A3A6AB;
  --r-text-3:#7C8086;
  --r-text-inverse:#151618;
  --r-accent:#55C495;  --r-accent-hover:#6BD2A6; --r-accent-soft:rgba(85,196,149,.13); --r-accent-ink:#06150F; --r-accent-line:rgba(85,196,149,.38);
  --r-warn:#E6A645;    --r-warn-soft:rgba(230,166,69,.13);  --r-warn-line:rgba(230,166,69,.36);
  --r-bad:#F0776D;     --r-bad-soft:rgba(240,119,109,.13);  --r-bad-line:rgba(240,119,109,.38);
  --r-info:#82AEE3;    --r-info-soft:rgba(130,174,227,.13);
  --r-mark:#D4AE5A;
  /* Graphite lifted a step on 2026-10-16 ("the black, make it more white"): soft charcoal, not black.
     depth: dark leans on lighter surfaces and a top highlight */
  --r-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --r-shadow-2:0 6px 20px rgba(0,0,0,.45);
  --r-shadow-3:0 22px 60px rgba(0,0,0,.6);
  --r-highlight:inset 0 1px 0 rgba(255,255,255,.045);
  --r-focus:0 0 0 3px color-mix(in srgb,var(--r-accent) 38%,transparent);
  --r-skeleton:#232428; --r-skeleton-shine:#2B2D31;
  --r-scrim:rgba(0,0,0,.55);
}

:root{
  /* type */
  --r-sans:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --r-mono:"Spline Sans Mono",Consolas,"Cascadia Mono",ui-monospace,monospace;
  --r-display:"Fraunces",Georgia,serif;  /* brand moments only: wordmark, empty states */
  --r-arabic:"Noto Kufi Arabic","Segoe UI","Geeza Pro",Tahoma,sans-serif;
  --r-fs-12:12px; --r-fs-13:13px; --r-fs-14:14px; --r-fs-15:15px; --r-fs-17:17px; --r-fs-20:20px; --r-fs-28:28px; --r-fs-40:40px;
  /* space (4-based) and shape */
  --r-s1:4px; --r-s2:8px; --r-s3:12px; --r-s4:16px; --r-s5:20px; --r-s6:24px; --r-s8:32px; --r-s10:40px; --r-s12:48px;
  --r-rad-xs:6px; --r-rad-sm:8px; --r-rad:10px; --r-rad-lg:14px; --r-rad-xl:20px; --r-rad-pill:999px;
  --r-tap:44px;
  /* motion: fast, never in the way */
  --r-ease-out:cubic-bezier(.23,1,.32,1);
  --r-ease-in-out:cubic-bezier(.77,0,.175,1);
  --r-ease-drawer:cubic-bezier(.32,.72,0,1);
  --r-d-press:120ms; --r-d-fast:160ms; --r-d-base:220ms; --r-d-slow:320ms;
}