/* ===========================================================================
   QCommLens — Design Tokens
   Two themes (Cream / Navy) + platform identity colors + 3 type pairings.
   =========================================================================== */

:root {
  /* Platform identity — overridden per-theme below for contrast */
  --bk: #D9A400;            /* Blinkit  */
  --zp: #6B3FA0;            /* Zepto    */
  --sw: #F2540A;            /* Swiggy   */

  /* spacing base unit = 4px (used as multiples) */
  --r-card: 14px;
  --r-ctl: 9px;
  --r-pill: 999px;
  --r-chip: 7px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 130ms;
  --t-med: 200ms;
  --t-slow: 320ms;

  /* type pairing 1 — Editorial (default) */
  --font-ui: 'Hanken Grotesk', system-ui, sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --display-weight: 500;
  --display-tracking: -0.018em;
}

/* ── Type pairings ──────────────────────────────────────────── */
[data-type="modern"] {
  --font-ui: 'Inter Tight', system-ui, sans-serif;
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.03em;
}
[data-type="warm"] {
  --font-ui: 'Public Sans', system-ui, sans-serif;
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
}

/* ===========================================================================
   THEME — CREAM (warm light)
   =========================================================================== */
[data-theme="cream"] {
  --bg:          #EFEBE1;
  --surface:     #F6F3EC;
  --card:        #FFFFFF;
  --card-2:      #FAF8F2;
  --card-inset:  #F1EDE4;

  --text-1: #211E18;
  --text-2: #5F5B50;
  --text-3: #938E80;
  --text-4: #B3AE9F;

  --border:        rgba(45,40,28,0.10);
  --border-2:      rgba(45,40,28,0.07);
  --border-strong: rgba(45,40,28,0.16);

  --track: rgba(45,40,28,0.07);

  --shadow-card: 0 1px 2px rgba(45,40,28,0.04), 0 2px 6px rgba(45,40,28,0.05);
  --shadow-lift: 0 6px 20px rgba(45,40,28,0.12), 0 2px 6px rgba(45,40,28,0.06);
  --shadow-pop:  0 12px 40px rgba(45,40,28,0.18), 0 2px 8px rgba(45,40,28,0.10);

  --pos: #2F8A57;
  --neg: #C24326;

  --bk: #C99700;
  --zp: #6B3FA0;
  --sw: #EC520A;

  --harness-bg: #211E18;
  --harness-fg: rgba(255,255,255,0.55);
  --harness-fg-active: #FFFFFF;

  --ai-grad: linear-gradient(135deg, #6B3FA0, #EC520A);
}

/* ===========================================================================
   THEME — NAVY (dark)
   =========================================================================== */
[data-theme="navy"] {
  --bg:          #0F1629;
  --surface:     #161F35;
  --card:        #1C2840;
  --card-2:      #1A2238;
  --card-inset:  #131B30;

  --text-1: rgba(255,255,255,0.95);
  --text-2: rgba(255,255,255,0.62);
  --text-3: rgba(255,255,255,0.42);
  --text-4: rgba(255,255,255,0.30);

  --border:        rgba(255,255,255,0.09);
  --border-2:      rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.16);

  --track: rgba(255,255,255,0.08);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-lift: 0 10px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-pop:  0 18px 50px rgba(0,0,0,0.6);

  --pos: #46D38A;
  --neg: #FB7185;

  --bk: #F5C518;
  --zp: #A678E6;
  --sw: #FF6A2B;

  --harness-bg: #060A14;
  --harness-fg: rgba(255,255,255,0.50);
  --harness-fg-active: #FFFFFF;

  --ai-grad: linear-gradient(135deg, #A678E6, #FF6A2B);
}

/* ── Platform helper classes (computed from --bk/--zp/--sw) ──── */
.is-bl { --pc: var(--bk); }
.is-ze { --pc: var(--zp); }
.is-sw { --pc: var(--sw); }

/* Vertical bar gradient: solid at base → soft at top */
[data-theme] {
  --bk-grad: linear-gradient(180deg, color-mix(in srgb, var(--bk) 32%, transparent), var(--bk));
  --zp-grad: linear-gradient(180deg, color-mix(in srgb, var(--zp) 32%, transparent), var(--zp));
  --sw-grad: linear-gradient(180deg, color-mix(in srgb, var(--sw) 32%, transparent), var(--sw));
  /* Horizontal bar gradient: solid at left → soft at right */
  --bk-grad-h: linear-gradient(90deg, var(--bk), color-mix(in srgb, var(--bk) 55%, transparent));
  --zp-grad-h: linear-gradient(90deg, var(--zp), color-mix(in srgb, var(--zp) 55%, transparent));
  --sw-grad-h: linear-gradient(90deg, var(--sw), color-mix(in srgb, var(--sw) 55%, transparent));
}