/* ============================================================
   MERIDIAN — Design Tokens · "Atmosphere"
   A living-sky design language. Day is porcelain, pale azure
   and lavender air behind true frosted glass with deep slate
   ink; Dusk is indigo twilight with porcelain accents.
   Color belongs to DATA (profit/loss); the brand accent is
   monochrome ink by default — calm, Apple-grade confidence.
   Chart marks are CVD-validated per surface.
   ============================================================ */

:root {
  /* ---- Day · atmosphere ---- */
  --bg: #edf1f8;
  --bg-solid: #edf1f8;
  /* sky canvas palette (r,g,b triplets read by JS) */
  --sky-1: 168, 196, 238;   /* pale azure     */
  --sky-2: 205, 195, 240;   /* soft lavender  */
  --sky-3: 248, 224, 202;   /* warm shell     */
  --sky-4: 182, 226, 209;   /* morning mint   */
  --sky-alpha: 0.55;

  /* ---- Surfaces & glass ---- */
  --glass: rgba(255, 255, 255, 0.60);
  --glass-hi: rgba(255, 255, 255, 0.78);
  --glass-soft: rgba(255, 255, 255, 0.38);
  --field-bg: rgba(255, 255, 255, 0.65);
  --overlay-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 253, 0.94));
  --thead: rgba(248, 250, 254, 0.92);
  --track: rgba(23, 32, 58, 0.08);
  --stroke: rgba(23, 32, 58, 0.10);
  --stroke-hi: rgba(23, 32, 58, 0.16);
  --edge-light: rgba(255, 255, 255, 0.85);
  --spot: rgba(255, 255, 255, 0.65);
  --scrim: rgba(30, 38, 66, 0.30);

  /* ---- Text ---- */
  --text-hi: #16213a;
  --text-mid: #44506b;
  --text-dim: #6f7c98;
  --text-faint: #a5b0c6;

  /* ---- Brand accent · Ink (white-label presets override) ---- */
  --accent: #1c2947;
  --accent-deep: #101a31;
  --accent-bright: #31415f;
  --accent-ink: #f7f9fd;
  --accent-soft: rgba(28, 41, 71, 0.07);
  --accent-softer: rgba(28, 41, 71, 0.04);
  --accent-glow: rgba(28, 41, 71, 0.20);
  --accent-grad: linear-gradient(135deg, #33456e 0%, #1c2947 55%, #101a31 100%);
  --stroke-accent: rgba(28, 41, 71, 0.24);

  /* ---- Semantic (reserved for P&L / state) ---- */
  --profit: #0c8a60;
  --profit-soft: rgba(15, 138, 99, 0.10);
  --profit-stroke: rgba(15, 138, 99, 0.28);
  --loss: #cf3d56;
  --loss-soft: rgba(209, 59, 85, 0.09);
  --loss-stroke: rgba(209, 59, 85, 0.26);
  --warn: #b46a10;
  --warn-soft: rgba(199, 122, 24, 0.12);
  --info: #5347c8;
  --info-soft: rgba(91, 75, 208, 0.09);

  /* ---- Chart marks (validated on light surface) ---- */
  --m-profit: #0f8a63;
  --m-loss: #d13b55;
  --m-info: #6d51d8;
  --m-accent: #3f6db4;            /* neutral single-measure mark */
  --m-profit-rgb: 15, 138, 99;
  --m-loss-rgb: 209, 59, 85;
  --m-grid: rgba(28, 41, 71, 0.07);
  --m-axis: rgba(28, 41, 71, 0.30);

  /* ---- Typography ---- */
  --f-display: 'Bricolage Grotesque', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --f-ui: 'Inter Tight', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* ---- Elevation (soft, tinted — never harsh black) ---- */
  --shadow-1: 0 1px 2px rgba(23, 32, 58, 0.04), 0 8px 24px rgba(23, 32, 58, 0.07);
  --shadow-2: 0 2px 6px rgba(23, 32, 58, 0.05), 0 18px 48px rgba(23, 32, 58, 0.11);
  --shadow-3: 0 10px 30px rgba(23, 32, 58, 0.12), 0 30px 90px rgba(23, 32, 58, 0.20);
  --glow-accent: 0 6px 24px var(--accent-glow);

  /* ---- Motion ---- */
  --e-out: cubic-bezier(0.22, 0.9, 0.28, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms var(--e-out);
  --t-med: 300ms var(--e-out);
  --t-slow: 600ms var(--e-out);

  /* ---- Layout ---- */
  --sidebar-w: 236px;
  --topbar-h: 62px;
  --content-max: 1460px;
  --gap: 14px;
}

/* ============================================================
   DUSK — indigo twilight. Porcelain ink accent, glass deepens.
   ============================================================ */
:root[data-theme="dusk"] {
  --bg: #10142b;
  --bg-solid: #10142b;
  --sky-1: 47, 62, 130;      /* indigo        */
  --sky-2: 84, 58, 132;      /* dusk violet   */
  --sky-3: 21, 74, 88;       /* deep teal     */
  --sky-4: 120, 74, 80;      /* far ember     */
  --sky-alpha: 0.30;

  --glass: rgba(26, 32, 62, 0.55);
  --glass-hi: rgba(38, 46, 84, 0.62);
  --glass-soft: rgba(34, 42, 78, 0.35);
  --field-bg: rgba(13, 17, 36, 0.55);
  --overlay-bg: linear-gradient(180deg, rgba(32, 39, 74, 0.96), rgba(20, 25, 50, 0.97));
  --thead: rgba(24, 30, 58, 0.92);
  --track: rgba(190, 200, 235, 0.10);
  --stroke: rgba(190, 200, 235, 0.10);
  --stroke-hi: rgba(190, 200, 235, 0.18);
  --edge-light: rgba(255, 255, 255, 0.10);
  --spot: rgba(170, 190, 255, 0.09);
  --scrim: rgba(4, 6, 16, 0.55);

  --text-hi: #eef1f9;
  --text-mid: #b7bed6;
  --text-dim: #7e88ad;
  --text-faint: #4d5678;

  /* Ink accent flips to porcelain */
  --accent: #f2f4fb;
  --accent-deep: #c9d4ee;
  --accent-bright: #ffffff;
  --accent-ink: #131a30;
  --accent-soft: rgba(235, 240, 255, 0.08);
  --accent-softer: rgba(235, 240, 255, 0.05);
  --accent-glow: rgba(214, 226, 255, 0.22);
  --accent-grad: linear-gradient(135deg, #ffffff 0%, #e8edfa 55%, #c5d2ef 100%);
  --stroke-accent: rgba(220, 230, 255, 0.28);

  --profit: #35c795;
  --profit-soft: rgba(53, 199, 149, 0.10);
  --profit-stroke: rgba(53, 199, 149, 0.30);
  --loss: #f26d83;
  --loss-soft: rgba(242, 109, 131, 0.10);
  --loss-stroke: rgba(242, 109, 131, 0.30);
  --warn: #ecb257;
  --warn-soft: rgba(236, 178, 87, 0.12);
  --info: #a08ff2;
  --info-soft: rgba(160, 143, 242, 0.10);

  /* Chart marks (validated on dark surface) */
  --m-profit: #21ad82;
  --m-loss: #e84a63;
  --m-info: #8f7bef;
  --m-accent: #5486d0;
  --m-profit-rgb: 33, 173, 130;
  --m-loss-rgb: 232, 74, 99;
  --m-grid: rgba(180, 192, 228, 0.08);
  --m-axis: rgba(180, 192, 228, 0.32);

  --shadow-1: 0 2px 10px rgba(2, 4, 12, 0.35);
  --shadow-2: 0 10px 34px rgba(2, 4, 12, 0.45);
  --shadow-3: 0 24px 80px rgba(2, 4, 12, 0.6);
}

/* ============================================================
   White-label accent presets — override the Ink default.
   Each is tuned twice: once for Day, once for Dusk.
   Chart marks stay neutral — color discipline for data.
   ============================================================ */

/* ---- Pacific (deep teal) ---- */
:root[data-accent="pacific"] {
  --accent: #0c8577; --accent-deep: #086b60; --accent-bright: #16a392;
  --accent-ink: #f4fdfb;
  --accent-soft: rgba(12, 133, 119, 0.09); --accent-softer: rgba(12, 133, 119, 0.05);
  --accent-glow: rgba(12, 133, 119, 0.25);
  --accent-grad: linear-gradient(135deg, #17a795 0%, #0c8577 55%, #086b60 100%);
  --stroke-accent: rgba(12, 133, 119, 0.28);
}
:root[data-theme="dusk"][data-accent="pacific"] {
  --accent: #3cc9b4; --accent-deep: #23a795; --accent-bright: #7ce4d5;
  --accent-ink: #04211c;
  --accent-soft: rgba(60, 201, 180, 0.10); --accent-softer: rgba(60, 201, 180, 0.06);
  --accent-glow: rgba(60, 201, 180, 0.28);
  --accent-grad: linear-gradient(135deg, #7ce4d5 0%, #3cc9b4 55%, #23a795 100%);
  --stroke-accent: rgba(60, 201, 180, 0.30);
}

/* ---- Indigo ---- */
:root[data-accent="indigo"] {
  --accent: #4653d6; --accent-deep: #3641b4; --accent-bright: #6a76ea;
  --accent-ink: #f5f6ff;
  --accent-soft: rgba(70, 83, 214, 0.08); --accent-softer: rgba(70, 83, 214, 0.05);
  --accent-glow: rgba(70, 83, 214, 0.24);
  --accent-grad: linear-gradient(135deg, #6a76ea 0%, #4653d6 55%, #3641b4 100%);
  --stroke-accent: rgba(70, 83, 214, 0.26);
}
:root[data-theme="dusk"][data-accent="indigo"] {
  --accent: #98a2f8; --accent-deep: #7580ee; --accent-bright: #bcc3fb;
  --accent-ink: #10143a;
  --accent-soft: rgba(152, 162, 248, 0.10); --accent-softer: rgba(152, 162, 248, 0.06);
  --accent-glow: rgba(152, 162, 248, 0.28);
  --accent-grad: linear-gradient(135deg, #bcc3fb 0%, #98a2f8 55%, #7580ee 100%);
  --stroke-accent: rgba(152, 162, 248, 0.30);
}

/* ---- Coral ---- */
:root[data-accent="coral"] {
  --accent: #d8543a; --accent-deep: #b8422b; --accent-bright: #ef7257;
  --accent-ink: #fff6f4;
  --accent-soft: rgba(216, 84, 58, 0.08); --accent-softer: rgba(216, 84, 58, 0.05);
  --accent-glow: rgba(216, 84, 58, 0.22);
  --accent-grad: linear-gradient(135deg, #ef7257 0%, #d8543a 55%, #b8422b 100%);
  --stroke-accent: rgba(216, 84, 58, 0.26);
}
:root[data-theme="dusk"][data-accent="coral"] {
  --accent: #ff9078; --accent-deep: #f06f55; --accent-bright: #ffb4a3;
  --accent-ink: #33110a;
  --accent-soft: rgba(255, 144, 120, 0.10); --accent-softer: rgba(255, 144, 120, 0.06);
  --accent-glow: rgba(255, 144, 120, 0.26);
  --accent-grad: linear-gradient(135deg, #ffb4a3 0%, #ff9078 55%, #f06f55 100%);
  --stroke-accent: rgba(255, 144, 120, 0.30);
}

/* ---- Violet ---- */
:root[data-accent="violet"] {
  --accent: #7448d0; --accent-deep: #5d36b2; --accent-bright: #9068e6;
  --accent-ink: #f8f5ff;
  --accent-soft: rgba(116, 72, 208, 0.08); --accent-softer: rgba(116, 72, 208, 0.05);
  --accent-glow: rgba(116, 72, 208, 0.22);
  --accent-grad: linear-gradient(135deg, #9068e6 0%, #7448d0 55%, #5d36b2 100%);
  --stroke-accent: rgba(116, 72, 208, 0.26);
}
:root[data-theme="dusk"][data-accent="violet"] {
  --accent: #b79af5; --accent-deep: #9878ec; --accent-bright: #d2befa;
  --accent-ink: #1d1040;
  --accent-soft: rgba(183, 154, 245, 0.10); --accent-softer: rgba(183, 154, 245, 0.06);
  --accent-glow: rgba(183, 154, 245, 0.28);
  --accent-grad: linear-gradient(135deg, #d2befa 0%, #b79af5 55%, #9878ec 100%);
  --stroke-accent: rgba(183, 154, 245, 0.30);
}