/* ============================================================
   tokens.css — oricohen.co Design Tokens
   Two layers: Primitives → Semantic
   Semantic tokens are used directly by components in index.html
   ============================================================ */


/* ── LAYER 1: PRIMITIVES ─────────────────────────────────────
   Raw values. No semantic meaning. Never used directly in
   components — only referenced by semantic tokens below.
   ──────────────────────────────────────────────────────────── */
:root {

  /* Gray scale */
  --gray-0:   #FFFFFF;
  --gray-50:  #F5F5F5;
  --gray-100: #EBEBEB;
  --gray-200: #D9D9D9;
  --gray-300: #BFBFBF;
  --gray-400: #999999;
  --gray-500: #737373;
  --gray-600: #595959;
  --gray-700: #3D3D3D;
  --gray-750: #333333;
  --gray-800: #2C2C2C;
  --gray-850: #222222;
  --gray-900: #1E1E1E;
  --gray-950: #1A1A1A;

  /* Purple scale — Figma purple, primary brand */
  --purple-50:  #F4F2FF;
  --purple-100: #E8E3FF;
  --purple-200: #D0C7FF;
  --purple-300: #B0A0FF;
  --purple-400: #9F8AFF;
  --purple-500: #7B61FF;   /* primary */
  --purple-600: #6248E8;
  --purple-700: #4D35C8;
  --purple-800: #3A278A;
  --purple-900: #2A1F7A;

  /* Blue scale — Figma blue, secondary / links */
  --blue-50:  #EEF6FF;
  --blue-100: #D0E8FE;
  --blue-200: #A8D4FD;
  --blue-300: #75B9FC;
  --blue-400: #4DAEFB;
  --blue-500: #18A0FB;     /* primary */
  --blue-600: #0882D4;
  --blue-700: #0664A8;
  --blue-800: #054880;

  /* Verint grey scale — cool/neutral grey, used for text tokens */
  --vg-50:  #f7f8f8;
  --vg-75:  #f3f4f5;
  --vg-300: #d0d3d6;
  --vg-500: #b0b6bb;
  --vg-600: #8d9296;
  --vg-650: #7b7f83;
  --vg-700: #6a6d70;
  --vg-750: #585b5e;
  --vg-950: #121213;

  /* Radius scale */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Motion */
  --ease:          cubic-bezier(.4,0,.2,1);
  --spring:        cubic-bezier(.22,.68,0,1.2);
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 300ms;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;
}


/* ── LAYER 2: SEMANTIC — Light (default) ─────────────────────
   Purpose-based tokens. These are what components use.
   ──────────────────────────────────────────────────────────── */
:root {

  /* Surface */
  --surface-canvas:  var(--gray-100);    /* desktop / page background */
  --surface-default: var(--gray-0);      /* window, card, panel */
  --surface-raised:  var(--gray-50);     /* window header, elevated row */
  --surface-sunken:  var(--gray-100);    /* input, inset area */
  --surface-overlay: var(--gray-0);      /* modal, popover */

  /* Border — solid hex only */
  --border-subtle:  var(--gray-200);     /* hairline, window edge */
  --border-default: var(--gray-300);     /* card, input, divider */
  --border-strong:  var(--gray-400);     /* emphasis, hover ring */

  /* Text — sourced from Verint Color Semantics (text.*) */
  --text-primary:   var(--vg-950);       /* #121213 — headings, body (text.neutral.main) */
  --text-secondary: var(--vg-750);       /* #585b5e — labels, captions (text.neutral.subtext) */
  --text-tertiary:  var(--vg-700);       /* #6a6d70 — placeholders, metadata (text.neutral.placeholder) */
  --text-brand:     var(--blue-700);     /* #0664a8 — brand/link text, AA compliant 6.18:1 (text.brand.regular) */
  --text-disabled:  var(--vg-500);       /* #b0b6bb — disabled state (text.common.disabled) */
  --text-inverse:   var(--vg-50);        /* #f7f8f8 — text on dark bg (text.common.inverse) */
  /* Ink for anything sitting ON the accent: a filled button, an active nav
     pill, a badge. Distinct from --text-inverse, and that distinction is the
     whole point of it. --text-inverse means "ink for a light surface", so it
     flips when the theme flips. An accent fill does NOT flip - the button is
     purple in both themes - so a filled control that reached for
     --text-inverse got near-black ink on mid purple in dark at 3.22:1. This
     one flips because the ACCENT changes lightness between themes (dark
     accents are deliberately bright), which is the opposite trigger. */
  --text-on-accent: var(--gray-0);       /* #FFFFFF - on purple-600, 5.81:1 */

  /* Interactive */
  --action-primary:       var(--purple-600);   /* CTA, active nav, badge — AA accessible on white */
  --action-primary-hover: var(--purple-700);
  --action-primary-subtle:var(--purple-50);    /* tint bg for badge, chip */
  --action-secondary:     var(--blue-500);     /* links, focus ring */
  --action-secondary-subtle: var(--blue-50);

  /* States */
  --state-hover:   var(--gray-100);          /* hover bg on transparent */
  --state-active:  rgba(24,160,251,.08);     /* selected row tint */
  --state-focus:   var(--blue-500);          /* focus ring color */

  /* Overlay */
  --overlay-backdrop: rgba(0,0,0,.25);
  --overlay-glass:    rgba(255,255,255,.88); /* toolbar pill bg */
  --overlay-glass-bd: var(--gray-200);       /* toolbar pill border */

  /* Terminal (always overrides — defined here for completeness) */
  --terminal-bg:     var(--gray-0);
  --terminal-text:   var(--gray-950);
  --terminal-grey:   var(--gray-400);
  --terminal-prompt: #3DAD38;
  --terminal-key:    #881391;
  --terminal-string: #C41A16;
  --terminal-dir:    #0066CC;
  --terminal-link:   #0066CC;
}


/* ── LAYER 2: SEMANTIC — Dark ────────────────────────────────
   Same token names, different values.
   ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {

  /* Surface */
  --surface-canvas:  var(--gray-900);
  --surface-default: var(--gray-800);
  --surface-raised:  var(--gray-750);
  --surface-sunken:  var(--gray-850);
  --surface-overlay: var(--gray-800);

  /* Border */
  --border-subtle:  var(--gray-700);
  --border-default: #464646;
  --border-strong:  var(--gray-600);

  /* Text — dark mode inversions of Verint text tokens */
  /* Pure white, not vg-75. #f3f4f5 read as slightly dulled against the dark
     surfaces, and body copy is primary now rather than secondary, so this
     carries the reading text. --gray-0 already exists in the primitives, so
     no new value is introduced. */
  --text-primary:   var(--gray-0);       /* #FFFFFF — pure white on dark */
  --text-secondary: var(--vg-300);       /* #d0d3d6 — muted on dark */
  /* vg-500, not vg-600. #8d9296 failed AA on every dark surface it is used on:
     4.45:1 on --surface-default, 4.02:1 on --surface-raised, both needing
     4.5:1. #b0b6bb clears all five dark surfaces, worst case 6.17:1 on
     --surface-raised. The cost is a flatter step down from --text-secondary
     (1.36:1 rather than 2.09:1), which is the right trade: a slightly
     subtler hierarchy beats unreadable metadata. */
  --text-tertiary:  var(--vg-500);       /* #b0b6bb — faint on dark, still AA */
  --text-brand:     var(--blue-400);     /* #4daefb — lighter blue for dark bg */
  --text-disabled:  var(--vg-750);       /* #585b5e — muted disabled */
  --text-inverse:   var(--vg-950);       /* #121213 — text on light elements within dark theme */
  /* Flips, for the reason given on the light-theme declaration: the accent
     itself is bright here, so the ink on top of it has to be dark. #121213 is
     6.73:1 on purple-400, and 5.61:1 to 9.74:1 on the five project accents. */
  --text-on-accent: var(--vg-950);       /* #121213 - on purple-400, 6.73:1 */

  /* Interactive.
     --action-primary does NOT stay the same in dark, which is what it used to
     do. #6248E8 (purple-600) is 2.40:1 on --surface-page and 2.17:1 on
     --surface-raised, so on dark it failed 1.4.11 as a border or focus ring
     and 1.4.3 anywhere it carried text. Every case study was already working
     around it with a per-page dark override; the token itself was the trap
     left for the next page that forgot to. purple-400 clears all three dark
     surfaces as normal text: 5.02:1 page, 4.54:1 raised, 5.72:1 sunken.
     Same move as --text-brand, which steps to blue-400 here.

     The consequence is that the accent is now an INK colour on dark and a
     FILL colour on light, so anything that fills with it needs
     --text-on-accent rather than a hardcoded #fff. That is the whole reason
     --text-on-accent exists. */
  --action-primary:        var(--purple-400);   /* #9F8AFF - AA on dark surfaces */
  --action-primary-hover:  var(--purple-300);   /* #B0A0FF - brighter on hover */
  --action-primary-subtle: rgba(98,72,232,.15);
  --action-secondary-subtle: rgba(24,160,251,.12);

  /* States */
  --state-hover:  rgba(255,255,255,.05);
  --state-active: rgba(24,160,251,.12);

  /* Overlay */
  --overlay-backdrop: rgba(0,0,0,.60);
  --overlay-glass:    rgba(40,40,40,.90);
  --overlay-glass-bd: var(--gray-700);

  /* Terminal dark */
  --terminal-bg:     #0D0D0D;
  --terminal-text:   #DDDDDD;
  --terminal-grey:   var(--gray-600);
  --terminal-prompt: #4A9EFF;
  --terminal-key:    #FF79C6;
  --terminal-string: #F1FA8C;
  --terminal-dir:    #8BE9FD;
  --terminal-link:   #8BE9FD;
}


/* ── LEGACY ALIASES ──────────────────────────────────────────
   Maps old token names in index.html to the new semantic layer.
   Allows gradual migration without breaking existing components.
   Remove an alias once its usage in index.html is updated.
   ──────────────────────────────────────────────────────────── */
:root {
  --panel:    var(--surface-default);
  --canvas:   var(--surface-canvas);
  --wbg:      var(--surface-default);
  --whdr:     var(--surface-raised);
  --inp:      var(--surface-sunken);
  --frm:      var(--surface-default);
  --mbox:     var(--surface-overlay);

  --bd:       var(--border-subtle);
  --bd2:      var(--border-default);
  --bd3:      var(--border-subtle);
  --wbd:      var(--border-subtle);
  --mbd:      var(--border-subtle);

  --tx:       var(--text-primary);
  --tx2:      var(--text-secondary);
  --tx3:      var(--text-tertiary);
  --tx-brand: var(--text-brand);
  --tx-dis:   var(--text-disabled);
  --tx-inv:   var(--text-inverse);

  --hov:      var(--state-hover);
  --act:      var(--state-active);

  --mbg:      var(--overlay-backdrop);
  --glass:    var(--overlay-glass);
  --glass-bd: var(--overlay-glass-bd);

  --blue:     var(--action-secondary);
  --figma:    var(--action-primary);

  --f:        var(--font-sans);
  --mono:     var(--font-mono);

  --r-xs:     var(--radius-xs);
  --r-sm:     var(--radius-sm);
  --r-md:     var(--radius-md);
  --r-lg:     var(--radius-lg);
  --r-xl:     var(--radius-xl);
  --r-full:   var(--radius-full);

  /* Terminal legacy */
  --tbg:      var(--terminal-bg);
  --ttx:      var(--terminal-text);
  --tgrey:    var(--terminal-grey);
  --tprompt:  var(--terminal-prompt);
  --tkey:     var(--terminal-key);
  --tstr:     var(--terminal-string);
  --tdir:     var(--terminal-dir);
  --tlink:    var(--terminal-link);
  --thdr:     var(--surface-canvas);
  --thdr-bd:  var(--border-subtle);

  /* Canvas dot pattern — rgba overlay, intentionally not solid */
  --dot: rgba(0,0,0,.05);
}

[data-theme="dark"] {
  --thdr:    #1C1C1C;
  --thdr-bd: var(--border-subtle);
  --dot:     rgba(255,255,255,.04);
}