/* FOLIO design tokens - CodeCloud Nova (see frontend/Design/design/DESIGN.md par.4) */
/* =====================================================================
   FOLIO — design tokens (see docs/design/DESIGN.md §4)
   ===================================================================== */
:root {
  /* Brand — measured from frontend/img/logo.png */
  --epicle-navy: #0C1248;
  --epicle-red:  #D03737;
  --epicle-grey: #B2B2B2;

  /* Ink scale (built from the brand navy) */
  --ink-950:#070A2B; --ink-900:#0C1248; --ink-800:#18205F; --ink-700:#252E78; --ink-600:#353F92;
  --ink-500:#4A55AD; --ink-400:#717BC6; --ink-300:#A2A9DC; --ink-200:#CDD1EE; --ink-100:#E6E8F7; --ink-50:#F3F4FB;

  /* Surfaces — warm paper, like a printed codebook */
  --bg-canvas:  #F4F2EC;
  --bg-nav:     #FAF9F6;
  --bg-surface: #FFFFFF;
  --bg-sunken:  #EFECE4;
  --bg-hover:   #F6F4EF;
  --bg-selected:#ECEEF9;
  --line:       #E5E1D7;
  --line-strong:#D5D0C3;

  --text-1:#14172C; --text-2:#454A62; --text-3:#666A80; --text-4:#A0A3B2;

  --accent:#353F92; --accent-strong:#252E78; --accent-soft:#ECEEF9;
  --btn-primary:#0C1248; --btn-primary-hover:#18205F; --on-primary:#FFFFFF;

  --rubric:#C02E2E; --rubric-soft:#FCEDEC;
  --success:#1D7A52; --success-soft:#E4F2EA;
  --warning:#94580A; --warning-soft:#FBF0DB;
  --focus-ring:#4A55AD;

  /* Rail */
  /* Side panel (rail + navigator read as one panel) */
  --side-bg:#EEECE6; --side-line:#DEDAD0; --side-fg:#5B5F73; --side-fg-strong:#14172C; --side-hover:rgba(20,23,44,.05);
  --side-sel:#FFFFFF; --side-sel-fg:#14172C; --side-sel-icon:#353F92; --side-sel-shadow:0 1px 2px rgba(20,23,44,.08), 0 0 0 1px rgba(20,23,44,.05);
  --tile-line:rgba(20,23,44,.16); --tile-on-bg:#0C1248; --tile-on-fg:#FFFFFF;
  --code-ext:#353F92;

  /* Tabular instructional notes */
  --n-incl:#3446A8;  --n-incl-bg:#F0F2FB;
  --n-ex1:#BF2D2D;   --n-ex1-bg:#FDF1F0;
  --n-ex2:#95590A;   --n-ex2-bg:#FDF5E7;
  --n-first:#6A4DB8; --n-first-bg:#F4F0FC;
  --n-addl:#0D7479;  --n-addl-bg:#E8F5F5;
  --n-also:#565D75;  --n-also-bg:#F1F2F5;
  --n-note:#565D75;  --n-note-bg:#F6F4EF;

  /* Code chips */
  --chip-bg:#EEF0FA; --chip-fg:#252E78; --chip-line:#D6DAF1;

  /* Elevation — hairlines first, shadow second */
  --sh-1: 0 1px 2px rgba(12,18,72,.05);
  --sh-2: 0 12px 32px -12px rgba(12,18,72,.28), 0 2px 6px -2px rgba(12,18,72,.08);
  --sh-3: 0 30px 80px -24px rgba(12,18,72,.40), 0 4px 14px -4px rgba(12,18,72,.10);

  /* Type */
  --f-display:'Source Serif 4','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-ui:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-code:'IBM Plex Mono','Cascadia Mono',Consolas,ui-monospace,monospace;

  /* Shape & layout */
  --r-xs:3px; --r-sm:5px; --r-md:8px; --r-lg:12px;
  --rail-w:64px; --nav-w:260px; --bar-h:52px; --status-h:28px;
  --row-h:30px; --pad:12px;
  --slant:14deg;               /* the angle of the Epicle mark's bars */
  --ease: cubic-bezier(.2,.7,.2,1);
}
[data-density="comfortable"] { --row-h:36px; --pad:16px; }

/* Dark: neutral black & grey (no blue cast). Colour is kept only for meaning:
   Excludes1 / NCCI 0 red, billable green, archive amber, and the note accent bars. */
[data-theme="dark"] {
  --bg-canvas:#212121; --bg-nav:#171717; --bg-surface:#292929; --bg-sunken:#1D1D1D; --bg-hover:#323232; --bg-selected:#3A3A3A;
  --line:#363636; --line-strong:#474747;
  --text-1:#ECECEC; --text-2:#C5C5C5; --text-3:#9B9B9B; --text-4:#6B6B6B;
  --accent:#F2F2F2; --accent-strong:#FFFFFF; --accent-soft:#3A3A3A; --code-ext:#A8A8A8;
  --btn-primary:#ECECEC; --btn-primary-hover:#FFFFFF; --on-primary:#171717;
  --rubric:#F07770; --rubric-soft:#3A2727;
  --success:#5DCB96; --success-soft:#233129; --warning:#E9B160; --warning-soft:#352D1F;
  --focus-ring:#ECECEC;
  --side-bg:#171717; --side-line:#2A2A2A; --side-fg:#9B9B9B; --side-fg-strong:#ECECEC; --side-hover:#212121;
  --side-sel:#2F2F2F; --side-sel-fg:#FFFFFF; --side-sel-icon:#ECECEC; --side-sel-shadow:none;
  --tile-line:rgba(255,255,255,.14); --tile-on-bg:#ECECEC; --tile-on-fg:#171717;
  --n-incl:#A9B6F2; --n-incl-bg:#2F2F2F;
  --n-ex1:#F07770;  --n-ex1-bg:#2F2F2F;
  --n-ex2:#E9B160;  --n-ex2-bg:#2F2F2F;
  --n-first:#C0AAF5;--n-first-bg:#2F2F2F;
  --n-addl:#66C9CE; --n-addl-bg:#2F2F2F;
  --n-also:#B0B0B0; --n-also-bg:#2F2F2F;
  --n-note:#B0B0B0; --n-note-bg:#2F2F2F;
  --chip-bg:#363636; --chip-fg:#F2F2F2; --chip-line:#4A4A4A;
  --sh-1: none;
  --sh-2: 0 12px 32px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  --sh-3: 0 30px 80px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
  color-scheme: dark;
}
[data-theme="dark"] a { text-decoration:underline; text-decoration-color:#6B6B6B; text-underline-offset:2px; }
[data-theme="dark"] ::selection { background:#4A4A4A; color:#FFFFFF; }