/* ═══════════════════════════════════════════════════════════════════
   COREVA LOCALIZATION — DESIGN TOKENS v1.0
   Source: Coreva Brand Guidelines + Queue UI Refactor + Design System
   Load order: MUST come before Bootstrap so --bs-* overrides take effect
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand (shared with Platform / Queue) ──────────────────────── */
  --cl-navy:          #0F172A;
  --cl-navy-90:       #1E293B;
  --cl-navy-80:       #334155;
  --cl-navy-60:       #475569;

  /* ── Product Accent (Coreva Platform Electric Cyan) ────────────── */
  --cl-accent:        #22D3EE;
  --cl-accent-dark:   #06B6D4;
  --cl-accent-10:     rgba(34, 211, 238, 0.10);
  --cl-accent-20:     rgba(34, 211, 238, 0.20);
  --cl-accent-rgb:    34, 211, 238;

  /* ── Workspace Surfaces ────────────────────────────────────────── */
  --cl-bg:            #F1F5F9;
  --cl-surface:       #FFFFFF;
  --cl-surface-2:     #F8FAFC;
  --cl-border:        #E2E8F0;
  --cl-border-strong: #CBD5E1;

  /* ── Text ──────────────────────────────────────────────────────── */
  --cl-text-primary:  #0F172A;
  --cl-text-body:     #334155;
  --cl-text-muted:    #64748B;
  --cl-text-disabled: #94A3B8;
  --cl-text-inverse:  #FFFFFF;

  /* ── Sidebar Text ──────────────────────────────────────────────── */
  --cl-sidebar-text:        rgba(255, 255, 255, 0.88);
  --cl-sidebar-text-muted:  rgba(255, 255, 255, 0.45);
  --cl-sidebar-text-label:  rgba(255, 255, 255, 0.35);

  /* ── Semantic — Translation Status Colors ──────────────────────── */
  --cl-complete:        #10B981;
  --cl-complete-bg:     #ECFDF5;
  --cl-complete-border: #A7F3D0;

  --cl-partial:         #F59E0B;
  --cl-partial-bg:      #FFFBEB;
  --cl-partial-border:  #FDE68A;

  --cl-missing:         #EF4444;
  --cl-missing-bg:      #FEF2F2;
  --cl-missing-border:  #FECACA;

  --cl-module:          #22D3EE;
  --cl-module-bg:       rgba(34, 211, 238, 0.10);
  --cl-module-border:   rgba(34, 211, 238, 0.30);

  /* ── Feedback ──────────────────────────────────────────────────── */
  --cl-success:     #10B981;
  --cl-success-bg:  #ECFDF5;
  --cl-warning:     #F59E0B;
  --cl-warning-bg:  #FFFBEB;
  --cl-danger:      #EF4444;
  --cl-danger-bg:   #FEF2F2;
  --cl-info:        #3B82F6;
  --cl-info-bg:     #EFF6FF;

  /* ── Font Family ───────────────────────────────────────────────── */
  --cl-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --cl-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Font Weights ──────────────────────────────────────────────── */
  --cl-weight-normal:   400;
  --cl-weight-medium:   500;
  --cl-weight-semibold: 600;
  --cl-weight-bold:     700;
  --cl-weight-black:    800;

  /* ── Font Sizes ────────────────────────────────────────────────── */
  --cl-text-xs:   0.6875rem;  /* 11px — badges, meta labels */
  --cl-text-sm:   0.75rem;    /* 12px — table meta, timestamps */
  --cl-text-base: 0.875rem;   /* 14px — body, form labels */
  --cl-text-md:   1rem;       /* 16px — card titles, nav items */
  --cl-text-lg:   1.125rem;   /* 18px — section headers */
  --cl-text-xl:   1.25rem;    /* 20px — page titles */
  --cl-text-2xl:  1.5rem;     /* 24px — KPI numbers */
  --cl-text-3xl:  1.875rem;   /* 30px — large KPI */
  --cl-text-4xl:  2.25rem;    /* 36px — dashboard hero numbers */

  /* ── Line Heights ──────────────────────────────────────────────── */
  --cl-leading-tight:  1.25;
  --cl-leading-normal: 1.5;

  /* ── Letter Spacing ────────────────────────────────────────────── */
  --cl-tracking-wide:   0.05em;   /* status badges, section labels */
  --cl-tracking-widest: 0.1em;    /* nav group labels */

  /* ── Base Spacing Scale (4 px grid) ───────────────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */

  /* ── Component Spacing ─────────────────────────────────────────── */
  --cl-sidebar-width:   240px;
  --cl-topbar-height:    56px;
  --cl-content-padding:  24px;
  --cl-card-padding:     20px;
  --cl-card-padding-sm:  14px;
  --cl-card-gap:         16px;
  --cl-input-padding-x:  14px;
  --cl-input-padding-y:   9px;
  --cl-table-cell-px:    16px;
  --cl-table-cell-py:    12px;
  --cl-btn-padding-x:    16px;
  --cl-btn-padding-y:     8px;

  /* ── Border Radius ─────────────────────────────────────────────── */
  --cl-radius-sm:    4px;
  --cl-radius:       8px;
  --cl-radius-md:   10px;
  --cl-radius-lg:   12px;
  --cl-radius-xl:   16px;
  --cl-radius-full: 9999px;  /* pills, badges */

  /* ── Elevation / Shadow ────────────────────────────────────────── */
  --cl-shadow-xs: 0 1px 2px  rgba(15, 23, 42, 0.06);
  --cl-shadow-sm: 0 2px 4px  rgba(15, 23, 42, 0.08);
  --cl-shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
  --cl-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.10);
  --cl-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* ── Transitions ───────────────────────────────────────────────── */
  --cl-transition:      150ms ease;
  --cl-transition-slow: 250ms ease;

  /* ── Z-Index ───────────────────────────────────────────────────── */
  --z-sidebar: 900;
  --z-topbar:  800;
  --z-modal:  1050;
  --z-toast:  1100;

  /* ── Bootstrap 5 Variable Overrides ───────────────────────────── */
  /* Maps Bootstrap's built-in variables to Coreva tokens so existing
     btn-primary, border-primary, text-primary classes all shift to
     the Coreva palette automatically. Do NOT remove Bootstrap. */
  --bs-primary:          var(--cl-accent);
  --bs-primary-rgb:      var(--cl-accent-rgb);
  --bs-body-font-family: var(--cl-font-body);
  --bs-body-bg:          var(--cl-bg);
  --bs-body-color:       var(--cl-text-body);
  --bs-border-radius:    var(--cl-radius);
  --bs-border-color:     var(--cl-border);
}