/* tokens.css
   Design tokens - the single source of colour, type, radius and shadow.
   No raw hex may appear in any other stylesheet.
   ------------------------------------------------------------------------- */

:root {
  /* brand, invariant across themes */
  --c-red:      #D70028;
  --c-reddeep:  #91000F;
  --c-teal:     #31B4B3;
  --c-gold:     #F09600;
  --c-purple:   #914696;
  --c-slate:    #5A6B87;

  /* light theme (default — the TDI deck is built on white) */
  --bg:         #FFFFFF;
  --bg-2:       #F6F7F9;
  --bg-3:       #EFF1F4;
  --surface:    #FFFFFF;
  --ink:        #2D2D2D;
  --ink-2:      #555555;
  --ink-3:      #86898F;
  --line:       #E2E5EA;
  --line-2:     #D3D7DE;
  --accent:     var(--c-red);
  --accent-ink: #FFFFFF;
  --accent-soft:#FDECEF;
  --ok:         #1E7A4A;
  --ok-soft:    #E7F4ED;
  --warn:       #A25C00;
  --warn-soft:  #FDF2E2;
  --idle-soft:  #EFF1F4;
  /* text and hairlines that sit ON a brand-coloured surface. Invariant by
     intent: white on TDI red reads the same in both themes. */
  --on-brand:      #FFFFFF;
  --on-brand-soft: rgba(255, 255, 255, .42);
  --bar-bg:        var(--c-reddeep);
  --bar-line:      color-mix(in srgb, #000000 22%, var(--c-reddeep));

  /* The disclosure arrow on a <select>. A data URI cannot read currentColor,
     so the colour is baked in here - once per theme, never in a component. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2386898F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  --shadow-1:   0 1px 2px rgba(16,20,28,.06), 0 1px 1px rgba(16,20,28,.04);
  --shadow-2:   0 10px 28px -12px rgba(16,20,28,.22), 0 2px 6px rgba(16,20,28,.06);
  --shadow-3:   0 24px 60px -20px rgba(16,20,28,.28);

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;

  --font: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system,
          "Helvetica Neue", Roboto, Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"] {
  --bg:         #14161B;
  --bg-2:       #191C22;
  --bg-3:       #1F232B;
  --surface:    #1B1F26;
  --ink:        #E9EAEC;
  --ink-2:      #A8AEB8;
  --ink-3:      #7C8390;
  --line:       #2B303A;
  --line-2:     #3A414D;
  --accent:     #FF3D5E;
  --accent-ink: #1A0206;
  --accent-soft:#2B1218;
  --ok:         #4ECB86;
  --ok-soft:    #14291D;
  --warn:       #E0A44A;
  --warn-soft:  #2B2113;
  --idle-soft:  #22262E;
  --c-teal:     #45C9C8;
  --c-gold:     #F5A82B;
  --c-purple:   #B268B7;
  --c-slate:    #8496B4;
  --c-reddeep:  #E0596C;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A7ADB8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --bar-bg:        #3A1016;
  --bar-line:      color-mix(in srgb, #000000 34%, #3A1016);
  --shadow-1:   0 1px 2px rgba(0,0,0,.5);
  --shadow-2:   0 10px 28px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  --shadow-3:   0 24px 60px -20px rgba(0,0,0,.8);
}