/* LOGOS Design Tokens v2 — Bootstrap-inspired compact palette
 * Naming: --lk-[role]-[shade]
 * Replaces: generated --ref-color-brand-* / --sys-color-* / --sys-spacing-*
 */

:root {
  /* ── Primary: Navy ──────────────────────────────── */
  --lk-primary-100: #d7e2ee;
  --lk-primary-200: #a8becf;
  --lk-primary-300: #6d90b0;
  --lk-primary-400: #436d93;
  --lk-primary-500: #2a5278;
  --lk-primary-600: #1a3c5d;   /* brand base */
  --lk-primary-700: #15304d;
  --lk-primary-800: #0f2238;
  --lk-primary-900: #09131f;

  /* ── Accent: Gold ───────────────────────────────── */
  --lk-accent-100: #fdf0c4;
  --lk-accent-200: #fce494;
  --lk-accent-300: #f5c842;
  --lk-accent-400: #f0b838;    /* brand gold */
  --lk-accent-500: #d99d1a;
  --lk-accent-600: #b87f10;

  /* ── Semantic ───────────────────────────────────── */
  --lk-success:      #22c55e;
  --lk-success-bg:   #f0fdf4;
  --lk-success-text: #166534;
  --lk-danger:       #ef4444;
  --lk-danger-bg:    #fef2f2;
  --lk-danger-text:  #991b1b;
  --lk-warning:      #f59e0b;
  --lk-warning-bg:   #fffbeb;
  --lk-warning-text: #92400e;
  --lk-info:         #3b82f6;
  --lk-info-bg:      #eff6ff;
  --lk-info-text:    #1e40af;

  /* ── Gray scale ─────────────────────────────────── */
  --lk-gray-50:  #f8fafc;
  --lk-gray-100: #f1f5f9;
  --lk-gray-200: #e2e8f0;
  --lk-gray-300: #cbd5e1;
  --lk-gray-400: #94a3b8;
  --lk-gray-500: #64748b;
  --lk-gray-600: #475569;
  --lk-gray-700: #334155;
  --lk-gray-800: #1e293b;
  --lk-gray-900: #0f172a;
  --lk-white:    #ffffff;
  --lk-black:    #0d1117;

  /* ── Semantic aliases ───────────────────────────── */
  --lk-color-bg:         var(--lk-gray-100);
  --lk-color-surface:    var(--lk-white);
  --lk-color-border:     var(--lk-gray-300);
  --lk-color-text:       var(--lk-gray-900);
  --lk-color-text-muted: var(--lk-gray-500);
  --lk-color-focus:      var(--lk-primary-400);

  /* ── Spacing (Bootstrap spacer × multipliers) ───── */
  /* base spacer = 1rem (16px) */
  --lk-s0: 0;
  --lk-s1: 0.25rem;   /*  4px */
  --lk-s2: 0.5rem;    /*  8px */
  --lk-s3: 1rem;      /* 16px */
  --lk-s4: 1.5rem;    /* 24px */
  --lk-s5: 3rem;      /* 48px */

  /* ── Typography ─────────────────────────────────── */
  --lk-font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --lk-fs-xs:   0.688rem;  /* 11px */
  --lk-fs-sm:   0.75rem;   /* 12px */
  --lk-fs-base: 0.875rem;  /* 14px */
  --lk-fs-md:   1rem;      /* 16px */
  --lk-fs-lg:   1.125rem;  /* 18px */
  --lk-fs-xl:   1.25rem;   /* 20px */
  --lk-fs-2xl:  1.5rem;    /* 24px */
  --lk-fs-3xl:  1.875rem;  /* 30px */

  --lk-fw-normal:   400;
  --lk-fw-medium:   500;
  --lk-fw-semibold: 600;
  --lk-fw-bold:     700;
  --lk-fw-black:    800;

  --lk-lh-base: 1.5;

  /* ── Radius ─────────────────────────────────────── */
  --lk-radius-sm:   4px;
  --lk-radius-md:   6px;
  --lk-radius-lg:   10px;
  --lk-radius-xl:   16px;
  --lk-radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────── */
  --lk-shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
  --lk-shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --lk-shadow-lg: 0 8px 40px rgba(0,0,0,0.20);

  /* ── Z-index ─────────────────────────────────────── */
  --lk-z-sticky: 100;
  --lk-z-modal:  200;
  --lk-z-toast:  9000;

  /* ── Transition ──────────────────────────────────── */
  --lk-transition: 0.15s ease;

  /* ── Backward-compat aliases (remove after migration) ─ */
  --ref-color-brand-navy-600:  var(--lk-primary-600);
  --ref-color-brand-navy-700:  var(--lk-primary-700);
  --ref-color-brand-navy-900:  var(--lk-primary-900);
  --ref-color-brand-gold-300:  var(--lk-accent-300);
  --ref-color-brand-gold-400:  var(--lk-accent-400);
  --sys-color-page-background: var(--lk-color-bg);
  --sys-color-card-background: var(--lk-color-surface);
  --sys-color-border-subtle:   var(--lk-color-border);
  --sys-color-text-primary:    var(--lk-color-text);
  --sys-color-text-secondary:  var(--lk-gray-700);
  --sys-color-text-muted:      var(--lk-color-text-muted);
  --sys-color-focus-ring:      var(--lk-color-focus);
  --sys-color-interactive-primary-bg:        var(--lk-primary-600);
  --sys-color-interactive-primary-bg-hover:  var(--lk-primary-500);
  --sys-color-interactive-primary-bg-active: var(--lk-primary-700);
  --sys-color-text-on-primary:               var(--lk-white);
  --sys-color-interactive-secondary-bg:       rgba(0,0,0,0.05);
  --sys-color-interactive-secondary-bg-hover: rgba(0,0,0,0.10);
  --sys-color-status-danger-bg:  var(--lk-danger-bg);
  --sys-color-status-danger-fg:  var(--lk-danger-text);
  --sys-spacing-sm: var(--lk-s1);
  --sys-spacing-lg: var(--lk-s2);
  --sys-spacing-xl: var(--lk-s2);
  --sys-spacing-3xl: var(--lk-s3);
  --sys-spacing-5xl: var(--lk-s5);
  --ref-font-family-sans:      var(--lk-font-sans);
  --ref-font-size-t2:          var(--lk-fs-sm);
  --ref-font-size-t3:          var(--lk-fs-base);
  --ref-font-size-t5:          var(--lk-fs-lg);
  --ref-font-size-t7:          var(--lk-fs-2xl);
  --ref-font-size-t8:          var(--lk-fs-3xl);
  --ref-font-weight-medium:    var(--lk-fw-medium);
  --ref-font-weight-semibold:  var(--lk-fw-semibold);
  --ref-font-weight-bold:      var(--lk-fw-bold);
  --sys-typography-body-size:  var(--lk-fs-base);
  --sys-radius-control:        var(--lk-radius-md);
  --sys-radius-card:           var(--lk-radius-lg);

  /* Semantic — on-dark (navy header, auth card) */
  --lk-on-dark-high:    rgba(255,255,255,0.90);   /* primary text on dark bg */
  --lk-on-dark-medium:  rgba(255,255,255,0.75);   /* secondary text on dark bg */
  --lk-on-dark-subtle:  rgba(255,255,255,0.55);   /* tertiary/muted on dark bg */

  /* White overlay — interactive on dark bg */
  --lk-overlay-border:  rgba(255,255,255,0.25);   /* ghost button border */
  --lk-overlay-bg-xs:   rgba(255,255,255,0.10);   /* subtle bg (lang switch) */
  --lk-overlay-bg-sm:   rgba(255,255,255,0.12);   /* hover bg small */
  --lk-overlay-bg-md:   rgba(255,255,255,0.16);   /* hover bg medium */
}