/* =============================================================================
   COSMOS DESIGN SYSTEM — Unified Token File
   Source of truth for all CSS values used across Foundry, StorePilot, Finance,
   CX, Army, Go, POS, Command Unit, and Crew.

   LAYER 1 — Primitives   Raw values. Never use directly in components.
   LAYER 2 — Semantic     Named aliases. Always use these in HTML/CSS.
   LAYER 3 — Device       Breakpoints, tap targets, shell dimensions.

   Rule: Never hardcode a hex, px, or font value in a component.
         Always use var(--...) from this file.
   ============================================================================= */

:root {

  /* ── LAYER 1 · PRIMITIVE COLORS ─────────────────────────────────────────── */

  /* Blue scale */
  --color-blue-50:  #E8F4FF;
  --color-blue-100: #DBEAFE;
  --color-blue-400: #2B8CFF;
  --color-blue-500: #1D6FD4;
  --color-blue-600: #1560B5;
  --color-blue-900: #0B1F33;

  /* Navy / Sidebar scale */
  --color-navy-900: #0B1F33;
  --color-navy-800: #132F4A;

  /* Teal */
  --color-teal-400: #06B6D4;
  --color-teal-100: #CFFAFE;

  /* Green */
  --color-green-500: #059669;
  --color-green-50:  #ECFDF5;

  /* Red */
  --color-red-500: #DC2626;
  --color-red-50:  #FEE2E2;

  /* Amber / Gold */
  --color-gold-500: #D97706;
  --color-gold-50:  #FFFBEB;

  /* Orange */
  --color-orange-500: #E85D04;
  --color-orange-50:  #FFF4ED;

  /* Indigo (POS accent) */
  --color-indigo-500: #6366F1;
  --color-indigo-50:  #EEF2FF;
  --color-indigo-950: #1E1B4B;

  /* Purple (Go accent) */
  --color-purple-600: #7C3AED;
  --color-purple-50:  #FAF5FF;

  /* Slate (text + surface) */
  --color-slate-950: #0F172A;
  --color-slate-700: #334155;
  --color-slate-500: #5C6B7A;
  --color-slate-400: #8B9CAE;
  --color-slate-200: #D8E4F0;
  --color-slate-100: #F4F7FB;
  --color-white:     #FFFFFF;

  /* ── LAYER 2 · SEMANTIC TOKENS ──────────────────────────────────────────── */

  /* Accent (primary interactive colour — overridden per module) */
  --acc:  var(--color-blue-500);
  --acc2: var(--color-blue-400);
  --accL: var(--color-blue-50);
  --accD: var(--color-blue-600);

  /* Alias kept for backward compat */
  --blue:  var(--color-blue-500);
  --blueL: var(--color-blue-100);

  /* Navy */
  --navy:  var(--color-navy-900);
  --navy2: var(--color-navy-800);

  /* Semantic colours */
  --teal:    var(--color-teal-400);
  --tealL:   var(--color-teal-100);
  --green:   var(--color-green-500);
  --greenL:  var(--color-green-50);
  --red:     var(--color-red-500);
  --redL:    var(--color-red-50);
  --gold:    var(--color-gold-500);
  --goldL:   var(--color-gold-50);
  --orange:  var(--color-orange-500);
  --orangeL: var(--color-orange-50);

  /* Surfaces */
  --bg:     var(--color-slate-100);
  --card:   var(--color-white);
  --border: var(--color-slate-200);

  /* Text hierarchy */
  --text1: var(--color-slate-950);
  --text2: var(--color-slate-500);
  --text3: var(--color-slate-400);

  /* Shell */
  --shell-surface: var(--color-white);
  --shell-muted:   var(--color-slate-400);
  --shell-hover:   var(--bg);

  /* ── LAYER 1 · SPACING PRIMITIVES (4px base) ────────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── LAYER 1 · BORDER RADIUS ────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── LAYER 1 · SHADOWS ──────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* ── LAYER 1 · TYPOGRAPHY ───────────────────────────────────────────────── */

  /* Cosmos Emoji is NOT in these stacks — Noto Emoji files include ASCII digits;
     Safari often ignores unicode-range and would steal payment/unit-code numerals.
     Use .cosmos-emoji / cosmosFmtEmojiHtml() for emoji only. */
  --font-sans: 'Inter', 'Cosmos INR', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cosmos INR', ui-monospace, monospace;

  --font-size-xs:   10px;
  --font-size-sm:   12px;
  --font-size-md:   14px;
  --font-size-base: 15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.08em;

  /* ── LAYER 1 · MOTION ───────────────────────────────────────────────────── */

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 450ms;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYER 3 · DEVICE & SHELL ───────────────────────────────────────────── */

  /* Breakpoints (reference values — use in @media queries directly) */
  --bp-mobile:  375px;
  --bp-tablet:  768px;
  --bp-desktop: 1280px;

  /* Tap targets */
  --tap-target-desktop: 32px;   /* mouse-friendly */
  --tap-target-tablet:  48px;   /* touch — Store OS / POS */
  --tap-target-mobile:  44px;   /* thumb — StorePilot / HQ mobile */

  /* Shell dimensions — Desktop */
  --sidebar: 248px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;

  /* Shell dimensions — Tablet (Store OS) */
  --tablet-topbar-height: 56px;

  /* Shell dimensions — Mobile */
  --mobile-topbar-height: 52px;
  /* Tab row chrome (~49px) + breathing room; content clearance must ALSO add safe-area.
     Prefer --cosmos-ios-content-bottom-clearance from cosmos-ios-shell.css when present. */
  --mobile-bottom-nav-height: 60px;
  --mobile-status-bar-height: 44px;

  /* ── LAYER 1 · GLASSMORPHISM ────────────────────────────────────────────── */
  /* Frosted-glass surfaces for modals, panels, toasts, and nav bars.
     Always place on a rich coloured or dark background so the blur reads. */

  --glass-bg:        #FFFFFF18;  /* white 9%  — standard glass fill          */
  --glass-bg-tinted: #FFFFFF0C;  /* white 5%  — nested / secondary surfaces  */
  --glass-border:    #FFFFFF22;  /* white 13% — hairline edge                */
  --glass-border-sub:#FFFFFF10;  /* white 6%  — inner dividers               */
  --glass-blur:      24px;       /* backdrop-filter blur radius              */
  --glass-blur-sm:   14px;       /* smaller panels, toasts                   */
  --glass-radius:    20px;       /* outer corner                             */
  --glass-shadow:    0 8px 32px 0 rgba(0,0,0,0.28); /* outer depth shadow   */
  --glass-shadow-sm: 0 4px 16px 0 rgba(0,0,0,0.22); /* toasts / chips       */
  --glass-text:      #FFFFFF;    /* primary text on glass                    */
  --glass-text-sub:  rgba(255,255,255,0.55); /* secondary / label text       */
}

/* =============================================================================
   MODULE THEME OVERRIDES
   Each module overrides ONLY --acc (and --navy when brand requires).
   All other tokens stay the same.
   ============================================================================= */

/* ─── Store OS / POS — Indigo accent (tablet, store staff) ──────────────── */
[data-module="pos"] {
  --acc:   #6366F1;
  --acc2:  #4F46E5;
  --accL:  var(--color-indigo-50);
  --accD:  #4338CA;
  --navy:  var(--color-indigo-950);

  /* Surface tweaks — POS uses cooler slate vs default warm slate */
  --border: #E2E8F0;
  --text2:  #475569;
  --text3:  #64748B;

  /* POS-specific aliases — backward compat; point to DS semantic tokens */
  --pos-bg:     var(--bg);
  --pos-card:   var(--card);
  --pos-border: var(--border);
  --pos-text-1: var(--text1);
  --pos-text-2: var(--text2);
  --pos-text-3: var(--text3);
  --pos-catalogue-rail-width: 212px;

  /* Legacy lenskart-pos.css aliases — map to DS (do not hardcode in module CSS) */
  --lk-ocean:       var(--navy);
  --lk-blue:        var(--acc2);
  --lk-light-blue:  var(--accL);
  --lk-mint:        var(--green);
  --lk-mint-bg:     var(--greenL);
  --lk-golden:      var(--gold);
  --lk-golden-bg:   var(--goldL);
  --lk-page-bg:     var(--bg);
  --lk-header-bg:   var(--card);
  --lk-text:        var(--text1);
  --lk-text-muted:  var(--text3);
  --lk-border:      var(--border);
  --lk-card:        var(--card);
  --lk-green:       var(--green);
  --lk-green-soft:  var(--greenL);
  --lk-blue-soft:   var(--accL);
  --lk-navy-cta:    var(--navy);
  --lk-shadow:      var(--shadow-sm);
  --lk-cart-shell:  var(--bg);
  --lk-cart-thumb-bg: var(--bg);
  --pos-glass-hover: var(--bg);

  /* Store OS: Inter + INR only — never put Cosmos Emoji in the stack (digit theft) */
  --font-sans: 'Inter', 'Cosmos INR', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cosmos INR', ui-monospace, monospace;
}

/* ─── Army HR — Green accent (admin + careers portal) ─────────────────── */
[data-module="army"] {
  --navy:   #0B1F35;
  --navy2:  #13293D;
  --acc:    #047857;
  --acc2:   #059669;
  --accL:   #D1FAE5;
  --accD:   #065F46;

  /* Army uses its own semantic colour scale */
  --green:   #047857;
  --greenL:  #D1FAE5;
  --gold:    #B45309;
  --goldL:   #FEF3C7;
  --red:     #DC2626;
  --redL:    #FEE2E2;
  --orange:  #C2410C;
  --orangeL: #FFEDD5;
  --teal:    #047857;
  --tealL:   #D1FAE5;
  --blue:    #1D4ED8;
  --blueL:   #DBEAFE;

  /* Army green-tinted surfaces */
  --bg:     #F4F9F7;
  --border: #E2EDE8;
  --text1:  #0B1F35;
  --text2:  #475569;
  --text3:  #94A3B8;
}

/* ─── Finance — Emerald green accent (HQ Finance desktop) ───────────────── */
[data-module="finance"] {
  --navy:   #0B1F35;
  --navy2:  #13293D;
  --acc:    #0E7E60;
  --acc2:   #14A377;
  --accL:   #D1FAE5;
  --accD:   #065F46;

  --bg:     #F0F6F3;
  --border: #E2EDE8;
  --text1:  #0B1F35;
  --text2:  #475569;
  --text3:  #94A3B8;
}

/* ─── CX — Violet accent (customer experience desktop) ──────────────────── */
[data-module="cx"] {
  --navy:   #0F172A;
  --navy2:  #1E293B;
  --acc:    #7C3AED;
  --acc2:   #8B5CF6;
  --accL:   #EDE9FE;
  --accD:   #5B21B6;

  --bg:     #F5F3FF;
  --border: #E9E5F5;
  --text1:  #0F172A;
  --text2:  #475569;
  --text3:  #94A3B8;
}

/* ─── Go PWA / Eyewoot — Purple accent (customer-facing mobile) ─────────── */
/* go-theme.css owns the full Go token set (--go-* namespace).
   This block provides the cosmos semantic aliases that shared components use. */
[data-module="go"] {
  --acc:   #5B4FE8;
  --acc2:  #7B72F0;
  --accL:  #EEEDFE;
  --accD:  #4A40D4;
  --navy:  #2E1065;

  --bg:     #F7F5F2;
  --card:   #FFFFFF;
  --border: #E2DDD6;
  --text1:  #1A1714;
  --text2:  #6B6560;
  --text3:  #A09890;
  --green:  #1A8C5A;
  --greenL: #E8F7EF;
  --gold:   #C8860A;
  --goldL:  #FDF3E0;
  --red:    #C43030;
  --redL:   #FEF0F0;
}