@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);
  }
}

/* B-Design-1 — Foundation & Contracts: design-system token contract
   Owner: tokens.css is the single source of truth for allowed company-app UI styling.
   Scope: company/admin-operational pages only. Excludes Platform Admin, Marketing, POS, Call Center, Call Center Orders and Sales Log feature refactors. */
@layer tokens {
  :root {
    /* Canonical surface tokens */
    --cx-surface-page: var(--cx-bg);
    --cx-surface-page-soft: var(--cx-bg-soft);
    --cx-surface-card: var(--cx-surface);
    --cx-surface-panel: var(--cx-panel-bg);
    --cx-surface-raised: var(--cx-glass-strong);
    --cx-surface-muted: var(--cx-surface-strong);

    /* Canonical text tokens */
    --cx-text-main: var(--cx-text);
    --cx-text-strong: var(--cx-ink, var(--cx-text));
    --cx-text-soft: var(--cx-muted);
    --cx-text-inverse: #ffffff;

    /* Canonical border/focus tokens */
    --cx-border-soft: var(--cx-border);
    --cx-border-strong: color-mix(in srgb, var(--cx-brand) 30%, var(--cx-border));
    --cx-focus-ring: 0 0 0 3px var(--cx-focus);

    /* Component contract tokens */
    --cx-card-bg: var(--cx-panel-bg);
    --cx-card-bg-solid: var(--cx-surface-card);
    --cx-card-border: var(--cx-border-soft);
    --cx-card-radius: var(--cx-radius-xl);
    --cx-card-radius-compact: var(--cx-radius-lg);
    --cx-card-shadow: var(--cx-shadow-soft);
    --cx-card-shadow-hover: var(--cx-shadow-card);

    --cx-btn-bg: var(--cx-surface-card);
    --cx-btn-border: var(--cx-border-soft);
    --cx-btn-text: var(--cx-text-main);
    --cx-btn-radius: var(--cx-radius-md);
    --cx-btn-shadow-hover: var(--cx-shadow-soft);
    --cx-btn-primary-bg: var(--cx-brand-gradient, linear-gradient(135deg, var(--cx-brand), var(--cx-brand-strong)));
    --cx-btn-primary-text: #ffffff;

    --cx-table-bg: var(--cx-surface-card);
    --cx-table-head-bg: var(--cx-surface-muted);
    --cx-table-head-text: var(--cx-text-main);
    --cx-table-cell-border: var(--cx-border-soft);
    --cx-table-row-hover-bg: var(--cx-row-hover-bg);
    --cx-table-row-hover-border: var(--cx-row-hover-border);
    --cx-table-row-selected-bg: var(--cx-row-selected-bg);
    --cx-table-row-selected-border: var(--cx-row-selected-border);
    --cx-table-radius: var(--cx-radius-lg);

    --cx-modal-bg: var(--cx-surface-card);
    --cx-modal-header-bg: var(--cx-glass-strong);
    --cx-modal-footer-bg: var(--cx-glass-strong);
    --cx-modal-border: var(--cx-border-soft);
    --cx-modal-radius: var(--cx-radius-xl);
    --cx-modal-shadow: var(--cx-shadow-card);

    --cx-field-bg: var(--cx-control-bg);
    --cx-field-border: var(--cx-control-border);
    --cx-field-text: var(--cx-text-main);
    --cx-field-radius: var(--cx-radius-md);

    --cx-state-bg: var(--cx-brand-soft);
    --cx-state-border: var(--cx-border-soft);
    --cx-state-text: var(--cx-text-soft);

    /* Motion contract: components consume these aliases, feature CSS should not invent durations. */
    --cx-motion-fast: 120ms;
    --cx-motion-base: var(--cx-transition);
    --cx-motion-slow: 240ms;
    --cx-motion-ease: ease;
    --cx-motion-lift-y: -2px;
  }

  [data-theme="dark"] {
    --cx-text-inverse: #ffffff;
    --cx-border-strong: color-mix(in srgb, var(--cx-brand-strong) 35%, var(--cx-border));
    --cx-btn-primary-text: #ffffff;
  }
}


/* B-Design-2 — Windows, Tables & Cards Unification tokens.
   Purpose: keep visual unification adjustable later from one place via tokens/variants,
   while preserving page-level behavior and allowing safe page hooks in later phases. */
@layer tokens {
  :root {
    --cx-card-header-bg: color-mix(in srgb, var(--cx-surface-card) 84%, var(--cx-brand-soft));
    --cx-card-header-border: color-mix(in srgb, var(--cx-brand) 14%, var(--cx-border-soft));
    --cx-card-header-padding: var(--cx-space-5);
    --cx-card-body-padding: var(--cx-space-5);
    --cx-card-footer-padding: var(--cx-space-4) var(--cx-space-5);
    --cx-card-body-gap: var(--cx-space-4);
    --cx-card-metric-min-height: 136px;
    --cx-card-interactive-outline: color-mix(in srgb, var(--cx-brand) 46%, var(--cx-border-soft));

    --cx-window-backdrop: rgba(16, 17, 34, .50);
    --cx-window-header-padding: var(--cx-space-5);
    --cx-window-body-padding: var(--cx-space-5);
    --cx-window-footer-padding: var(--cx-space-4) var(--cx-space-5);
    --cx-window-title-size: clamp(1.08rem, 2vw, 1.34rem);
    --cx-window-subtitle-size: .94rem;
    --cx-window-meta-gap: .55rem;
    --cx-window-summary-bg: color-mix(in srgb, var(--cx-brand-soft) 42%, var(--cx-surface-card));
    --cx-window-summary-border: color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border-soft));
    --cx-window-badge-bg: color-mix(in srgb, var(--cx-brand-soft) 54%, var(--cx-surface-card));
    --cx-window-badge-text: var(--cx-brand-text);

    --cx-table-wrap-border: color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border-soft));
    --cx-table-wrap-shadow: 0 18px 42px rgba(44, 31, 74, .08);
    --cx-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 36%, var(--cx-surface-card));
    --cx-table-caption-text: var(--cx-text-main);
    --cx-table-head-shadow: inset 0 -1px 0 color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border-soft));
    --cx-table-cell-padding-y: .82rem;
    --cx-table-cell-padding-x: .9rem;
    --cx-table-cell-padding-y-dense: .62rem;
    --cx-table-cell-padding-x-dense: .72rem;
    --cx-table-detail-row-bg: color-mix(in srgb, var(--cx-brand-soft) 26%, var(--cx-surface-card));
    --cx-table-detail-border: color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border-soft));
  }

  [data-theme="dark"] {
    --cx-window-backdrop: rgba(4, 5, 18, .74);
    --cx-card-header-bg: color-mix(in srgb, var(--cx-surface-card) 76%, var(--cx-brand-soft));
    --cx-window-summary-bg: color-mix(in srgb, var(--cx-brand-soft) 26%, var(--cx-surface-strong));
    --cx-window-summary-border: color-mix(in srgb, var(--cx-brand-strong) 18%, var(--cx-border-soft));
    --cx-window-badge-bg: color-mix(in srgb, var(--cx-brand-soft) 34%, var(--cx-surface-strong));
    --cx-table-wrap-shadow: 0 18px 48px rgba(0, 0, 0, .26);
    --cx-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 24%, var(--cx-surface-strong));
    --cx-table-detail-row-bg: color-mix(in srgb, var(--cx-brand-soft) 18%, var(--cx-surface-strong));
  }
}


/* B-Design Table Fix — Enterprise table readability/performance contract.
   Purpose: readable modern tables with safe scroll/pagination-friendly layout.
   Does not animate rows and does not alter data/API behavior. */
@layer tokens {
  :root {
    --cx-enterprise-table-wrap-bg: var(--cx-surface-card);
    --cx-enterprise-table-wrap-border: color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border-soft));
    --cx-enterprise-table-wrap-shadow: 0 18px 42px rgba(44, 31, 74, .075);
    --cx-enterprise-table-head-bg: color-mix(in srgb, var(--cx-surface-muted) 84%, var(--cx-brand-soft));
    --cx-enterprise-table-head-text: var(--cx-text-main);
    --cx-enterprise-table-row-bg: var(--cx-surface-card);
    --cx-enterprise-table-row-alt-bg: color-mix(in srgb, var(--cx-surface-page-soft) 78%, var(--cx-surface-card));
    --cx-enterprise-table-row-hover-bg: color-mix(in srgb, var(--cx-brand-soft) 32%, var(--cx-surface-card));
    --cx-enterprise-table-border: color-mix(in srgb, var(--cx-brand) 10%, var(--cx-border-soft));
    --cx-enterprise-table-cell-y: .92rem;
    --cx-enterprise-table-cell-x: 1rem;
    --cx-enterprise-table-row-height: 56px;
    --cx-enterprise-table-head-height: 52px;
    --cx-enterprise-table-font-size: .94rem;
    --cx-enterprise-table-radius: var(--cx-radius-xl);
    --cx-enterprise-table-max-height: min(64vh, 680px);
    --cx-enterprise-table-min-width: 1040px;
    --cx-enterprise-table-ledger-min-width: 1120px;
    --cx-enterprise-table-movement-min-width: 1240px;
    --cx-enterprise-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 34%, var(--cx-surface-card));
  }

  [data-theme="dark"] {
    --cx-enterprise-table-wrap-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    --cx-enterprise-table-head-bg: color-mix(in srgb, var(--cx-surface-strong) 86%, var(--cx-brand-soft));
    --cx-enterprise-table-row-alt-bg: color-mix(in srgb, var(--cx-surface-strong) 46%, var(--cx-surface-card));
    --cx-enterprise-table-row-hover-bg: color-mix(in srgb, var(--cx-brand-soft) 22%, var(--cx-surface-strong));
    --cx-enterprise-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 22%, var(--cx-surface-strong));
  }
}