@layer tokens {
  :root {
    color-scheme: light;
    --cx-font-family: "Inter", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --cx-bg: #eef8f7;
    --cx-bg-soft: #f8fbfc;
    --cx-surface: #ffffff;
    --cx-surface-strong: #f3f7f8;
    --cx-text: #102a2d;
    --cx-muted: #617579;
    --cx-border: rgba(16, 42, 45, .12);
    --cx-brand: #307d7e;
    --cx-brand-strong: #0f766e;
    --cx-brand-soft: rgba(48, 125, 126, .12);
    --cx-accent: #d4af37;
    --cx-success: #168a4a;
    --cx-warning: #b7791f;
    --cx-danger: #b42318;
    --cx-info: #1d4ed8;
    --cx-radius-sm: .6rem;
    --cx-radius-md: .9rem;
    --cx-radius-lg: 1.25rem;
    --cx-radius-xl: 1.75rem;
    --cx-shadow-card: 0 20px 55px rgba(15, 42, 45, .11);
    --cx-shadow-soft: 0 10px 26px rgba(15, 42, 45, .08);
    --cx-space-1: .25rem;
    --cx-space-2: .5rem;
    --cx-space-3: .75rem;
    --cx-space-4: 1rem;
    --cx-space-5: 1.25rem;
    --cx-space-6: 1.5rem;
    --cx-space-8: 2rem;
    --cx-sidebar-width: 280px;
    --cx-topbar-height: 72px;
    --cx-transition: 160ms ease;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --cx-bg: #071a1d;
    --cx-bg-soft: #0b2226;
    --cx-surface: #102a2d;
    --cx-surface-strong: #17393d;
    --cx-text: #ecfeff;
    --cx-muted: #aac4c8;
    --cx-border: rgba(236, 254, 255, .13);
    --cx-brand-soft: rgba(48, 125, 126, .25);
    --cx-shadow-card: 0 20px 55px rgba(0, 0, 0, .28);
    --cx-shadow-soft: 0 10px 26px rgba(0, 0, 0, .22);
  }
}

@layer tokens {
  :root {
    --cx-sem-revenue: #2563eb;
    --cx-sem-revenue-soft: rgba(37, 99, 235, .12);
    --cx-sem-revenue-line: rgba(37, 99, 235, .28);
    --cx-sem-profit: #15803d;
    --cx-sem-profit-soft: rgba(21, 128, 61, .13);
    --cx-sem-profit-line: rgba(21, 128, 61, .30);
    --cx-sem-loss: #b42318;
    --cx-sem-loss-soft: rgba(180, 35, 24, .12);
    --cx-sem-loss-line: rgba(180, 35, 24, .30);
    --cx-sem-cost: #c2410c;
    --cx-sem-cost-soft: rgba(194, 65, 12, .13);
    --cx-sem-cost-line: rgba(194, 65, 12, .30);
    --cx-sem-expense: #7e22ce;
    --cx-sem-expense-soft: rgba(126, 34, 206, .12);
    --cx-sem-expense-line: rgba(126, 34, 206, .28);
    --cx-sem-inventory: #0f766e;
    --cx-sem-inventory-soft: rgba(15, 118, 110, .13);
    --cx-sem-inventory-line: rgba(15, 118, 110, .28);
    --cx-sem-production: #92400e;
    --cx-sem-production-soft: rgba(146, 64, 14, .13);
    --cx-sem-production-line: rgba(146, 64, 14, .28);
    --cx-sem-forecast: #0284c7;
    --cx-sem-forecast-soft: rgba(2, 132, 199, .12);
    --cx-sem-forecast-line: rgba(2, 132, 199, .28);
    --cx-sem-settlement: #1e3a8a;
    --cx-sem-settlement-soft: rgba(30, 58, 138, .12);
    --cx-sem-settlement-line: rgba(30, 58, 138, .28);
    --cx-sem-pending: #b7791f;
    --cx-sem-pending-soft: rgba(183, 121, 31, .14);
    --cx-sem-pending-line: rgba(183, 121, 31, .32);
    --cx-sem-neutral: #475569;
    --cx-sem-neutral-soft: rgba(71, 85, 105, .11);
    --cx-sem-neutral-line: rgba(71, 85, 105, .24);

    --cx-row-hover-bg: rgba(15, 118, 110, .075);
    --cx-row-hover-border: rgba(15, 118, 110, .32);
    --cx-row-selected-bg: rgba(15, 118, 110, .13);
    --cx-row-selected-border: rgba(15, 118, 110, .48);
    --cx-control-height: 44px;
    --cx-toolbar-gap: .75rem;
  }

  [data-theme="dark"] {
    --cx-row-hover-bg: rgba(94, 234, 212, .10);
    --cx-row-hover-border: rgba(94, 234, 212, .35);
    --cx-row-selected-bg: rgba(94, 234, 212, .16);
    --cx-row-selected-border: rgba(94, 234, 212, .52);
  }
}

@layer tokens {
  :root {
    --cx-focus: rgba(15, 118, 110, .42);
    --cx-glass: rgba(255, 255, 255, .78);
    --cx-glass-strong: rgba(255, 255, 255, .90);
    --cx-panel-bg: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(238, 248, 247, .78));
    --cx-page-gradient-a: rgba(48, 125, 126, .20);
    --cx-page-gradient-b: rgba(212, 175, 55, .12);
    --cx-table-toolbar-bg: rgba(255, 255, 255, .72);
    --cx-control-bg: rgba(255, 255, 255, .96);
    --cx-control-border: rgba(15, 118, 110, .16);
    --cx-brand-text: #075e5f;
  }

  [data-theme="dark"] {
    --cx-brand: #2dd4bf;
    --cx-brand-strong: #5eead4;
    --cx-brand-text: #99f6e4;
    --cx-glass: rgba(16, 42, 45, .80);
    --cx-glass-strong: rgba(23, 57, 61, .92);
    --cx-panel-bg: linear-gradient(135deg, rgba(23, 57, 61, .95), rgba(11, 34, 38, .84));
    --cx-page-gradient-a: rgba(45, 212, 191, .12);
    --cx-page-gradient-b: rgba(212, 175, 55, .07);
    --cx-table-toolbar-bg: rgba(16, 42, 45, .78);
    --cx-control-bg: rgba(11, 34, 38, .92);
    --cx-control-border: rgba(94, 234, 212, .18);
    --cx-sem-revenue: #60a5fa;
    --cx-sem-profit: #4ade80;
    --cx-sem-loss: #fb7185;
    --cx-sem-cost: #fb923c;
    --cx-sem-expense: #c084fc;
    --cx-sem-inventory: #5eead4;
    --cx-sem-production: #fbbf24;
    --cx-sem-forecast: #38bdf8;
    --cx-sem-settlement: #93c5fd;
    --cx-sem-pending: #facc15;
  }
}

/* Phase 31C — Costix Brand Theme tokens: logo-based purple/violet/magenta identity */
@layer tokens {
  :root {
    color-scheme: light;
    --cx-brand-primary: #241066;
    --cx-brand-secondary: #5b1aa3;
    --cx-brand-accent: #d83bbe;
    --cx-brand-accent-2: #9b2bd9;
    --cx-brand-ink: #1f1452;
    --cx-brand-cream: #fbfaff;
    --cx-brand-gradient: linear-gradient(135deg, #241066 0%, #5b1aa3 58%, #d83bbe 100%);
    --cx-brand-gradient-soft: linear-gradient(135deg, rgba(36, 16, 102, .10), rgba(216, 59, 190, .075));
    --cx-logo-arc: linear-gradient(135deg, #ffffff 0 35%, #d83bbe 36% 70%, #5b1aa3 71% 100%);

    --cx-bg: #f7f4ff;
    --cx-bg-soft: #fcfbff;
    --cx-surface: #ffffff;
    --cx-surface-strong: #f1ecff;
    --cx-text: #18112f;
    --cx-ink: #18112f;
    --cx-muted: #706783;
    --cx-border: rgba(36, 16, 102, .13);
    --cx-brand: var(--cx-brand-primary);
    --cx-brand-strong: var(--cx-brand-secondary);
    --cx-brand-soft: rgba(91, 26, 163, .10);
    --cx-accent: var(--cx-brand-accent);
    --cx-focus: rgba(216, 59, 190, .28);
    --cx-glass: rgba(255, 255, 255, .86);
    --cx-glass-strong: rgba(255, 255, 255, .95);
    --cx-panel-bg: linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,255,.88));
    --cx-page-gradient-a: rgba(36, 16, 102, .12);
    --cx-page-gradient-b: rgba(216, 59, 190, .10);
    --cx-table-toolbar-bg: rgba(255,255,255,.82);
    --cx-control-bg: rgba(255,255,255,.98);
    --cx-control-border: rgba(91, 26, 163, .18);
    --cx-brand-text: #3a167f;
    --cx-shadow-card: 0 22px 58px rgba(36, 16, 102, .12);
    --cx-shadow-soft: 0 12px 28px rgba(36, 16, 102, .09);

    --cx-row-hover-bg: rgba(91, 26, 163, .075);
    --cx-row-hover-border: rgba(216, 59, 190, .34);
    --cx-row-selected-bg: rgba(91, 26, 163, .12);
    --cx-row-selected-border: rgba(216, 59, 190, .48);
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --cx-bg: #0d0920;
    --cx-bg-soft: #130d2f;
    --cx-surface: #191238;
    --cx-surface-strong: #241657;
    --cx-text: #fbf8ff;
    --cx-ink: #ffffff;
    --cx-muted: #c9bfda;
    --cx-border: rgba(235, 224, 255, .16);
    --cx-brand: #8b5cf6;
    --cx-brand-strong: #d83bbe;
    --cx-brand-soft: rgba(139, 92, 246, .16);
    --cx-brand-text: #f0d2ff;
    --cx-focus: rgba(216, 59, 190, .42);
    --cx-glass: rgba(25, 18, 56, .86);
    --cx-glass-strong: rgba(20, 13, 47, .96);
    --cx-panel-bg: linear-gradient(135deg, rgba(25,18,56,.98), rgba(19,13,47,.94));
    --cx-page-gradient-a: rgba(139, 92, 246, .18);
    --cx-page-gradient-b: rgba(216, 59, 190, .13);
    --cx-table-toolbar-bg: rgba(20, 13, 47, .86);
    --cx-control-bg: rgba(25, 18, 56, .96);
    --cx-control-border: rgba(216, 59, 190, .22);
    --cx-shadow-card: 0 24px 65px rgba(0, 0, 0, .42);
    --cx-shadow-soft: 0 13px 30px rgba(0, 0, 0, .34);

    --cx-sem-revenue: #7dd3fc;
    --cx-sem-revenue-soft: rgba(125, 211, 252, .13);
    --cx-sem-revenue-line: rgba(125, 211, 252, .32);
    --cx-sem-profit: #86efac;
    --cx-sem-profit-soft: rgba(134, 239, 172, .12);
    --cx-sem-profit-line: rgba(134, 239, 172, .30);
    --cx-sem-loss: #fb7185;
    --cx-sem-loss-soft: rgba(251, 113, 133, .13);
    --cx-sem-loss-line: rgba(251, 113, 133, .34);
    --cx-sem-cost: #fdba74;
    --cx-sem-cost-soft: rgba(253, 186, 116, .13);
    --cx-sem-cost-line: rgba(253, 186, 116, .32);
    --cx-sem-expense: #e879f9;
    --cx-sem-expense-soft: rgba(232, 121, 249, .14);
    --cx-sem-expense-line: rgba(232, 121, 249, .34);
    --cx-sem-inventory: #a78bfa;
    --cx-sem-inventory-soft: rgba(167, 139, 250, .14);
    --cx-sem-inventory-line: rgba(167, 139, 250, .34);
    --cx-sem-forecast: #93c5fd;
    --cx-sem-forecast-soft: rgba(147, 197, 253, .13);
    --cx-sem-forecast-line: rgba(147, 197, 253, .32);
    --cx-sem-production: #f0abfc;
    --cx-sem-production-soft: rgba(240, 171, 252, .13);
    --cx-sem-production-line: rgba(240, 171, 252, .32);
    --cx-sem-pending: #fcd34d;
    --cx-sem-pending-soft: rgba(252, 211, 77, .14);
    --cx-sem-pending-line: rgba(252, 211, 77, .34);
    --cx-sem-settlement: #c4b5fd;
    --cx-sem-settlement-soft: rgba(196, 181, 253, .14);
    --cx-sem-settlement-line: rgba(196, 181, 253, .34);
    --cx-sem-neutral: #cbd5e1;
    --cx-sem-neutral-soft: rgba(203, 213, 225, .10);
    --cx-sem-neutral-line: rgba(203, 213, 225, .25);

    --cx-row-hover-bg: rgba(216, 59, 190, .11);
    --cx-row-hover-border: rgba(216, 59, 190, .42);
    --cx-row-selected-bg: rgba(139, 92, 246, .18);
    --cx-row-selected-border: rgba(216, 59, 190, .55);
  }
}