/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — qafila-ops
   3-layer architecture: Primitive → Semantic → Component
   Single source of truth. Import this file; never define raw values
   elsewhere.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layer 1: Primitive ─────────────────────────────────────────────
   Raw named values. Never referenced directly in component styles.
   Changing a primitive updates every semantic token that references it.
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* Color palette */
  --prim-navy-950:   #0F1724;
  --prim-navy-900:   #111827;
  --prim-navy-850:   #0b1220;
  --prim-navy-800:   #1a2a3a;
  --prim-navy-700:   #1A2332;
  --prim-gold-400:   #F4C842;
  --prim-gold-500:   #E8B82E;
  --prim-gold-50:    #FDF3D9;
  --prim-cream-100:  #F5F1E8;
  --prim-cream-50:   #FAFAF8;
  --prim-white:      #FFFFFF;
  --prim-gray-400:   #9CA3AF;

  /* Spacing scale (4-point grid) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;

  /* Border-radius scale */
  --prim-radius-sm:   8px;
  --prim-radius-md:  10px;
  --prim-radius-lg:  12px;
  --prim-radius-xl:  16px;
  --prim-radius-2xl: 18px;

  /* Motion */
  --prim-duration-fast:   0.15s;
  --prim-duration-normal: 0.3s;
  --prim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Layer 2: Semantic ──────────────────────────────────────────────
   Purpose-driven aliases. Components reference semantic tokens only.
   Dark mode overrides happen at this layer via [data-theme="dark"].
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --primary:      var(--prim-navy-950);
  --primary-600:  var(--prim-navy-900);
  --primary-dark: var(--prim-navy-850);
  --accent:       var(--prim-gold-400);
  --accent-dark:  var(--prim-gold-500);
  --accent-light: var(--prim-gold-50);

  /* Surfaces */
  --bg:      var(--prim-cream-100);
  --surface: var(--prim-white);

  /* Text */
  --ink:   var(--prim-navy-700);
  --muted: var(--prim-gray-400);

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, var(--prim-gold-400) 0%, var(--prim-gold-500) 100%);
  --gradient-dark:   linear-gradient(135deg, var(--prim-navy-950) 0%, var(--prim-navy-800) 100%);
  --gradient-light:  linear-gradient(135deg, var(--prim-cream-50)  0%, var(--prim-cream-100) 100%);
}

/* ── Dark mode — semantic layer overrides only ──────────────────────
   Desaturated palette. Applied via JS: document.documentElement
   .setAttribute('data-theme','dark'). Primitives stay unchanged.
   ──────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Brand — inverted: light surfaces, gold stays gold */
  --primary:      #E8EEF6;
  --primary-600:  #D1DCF0;
  --primary-dark: #C8D5EA;
  --accent:       var(--prim-gold-400);   /* gold unchanged */
  --accent-dark:  var(--prim-gold-500);
  --accent-light: rgba(244,200,66,0.12);

  /* Surfaces — dark neutrals */
  --bg:      #0D1117;
  --surface: #161B22;

  /* Text — light on dark */
  --ink:   #E6EDF3;
  --muted: #7D8590;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, var(--prim-gold-400) 0%, var(--prim-gold-500) 100%);
  --gradient-dark:   linear-gradient(135deg, #0D1117 0%, #161B22 100%);
  --gradient-light:  linear-gradient(135deg, #1C2128 0%, #0D1117 100%);
}

[data-theme="dark"] body{background:linear-gradient(180deg,#0D1117 0%,#0A0E14 100%);}
[data-theme="dark"] .card{background:#161B22;border-color:rgba(255,255,255,0.06);}
[data-theme="dark"] .card:hover{border-color:rgba(244,200,66,0.25);}
[data-theme="dark"] .input{background:#0D1117;border-color:rgba(255,255,255,0.1);color:#E6EDF3;}
[data-theme="dark"] .input:focus{border-color:var(--accent);background:#0D1117;}
[data-theme="dark"] .input::placeholder{color:#4A5568;}
[data-theme="dark"] header.bg-primary,[data-theme="dark"] nav.bg-ink{background:#010409!important;}
[data-theme="dark"] .mobile-bottom-nav{background:#010409;border-top-color:rgba(255,255,255,0.06);}
[data-theme="dark"] .cal-cell{background:#161B22;border-color:rgba(255,255,255,0.07);}
[data-theme="dark"] .cal-cell:hover{background:#1C2128;}
[data-theme="dark"] .cal-cell.today{background:#1A2332;border-color:var(--accent);}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#21262D 25%,#30363D 50%,#21262D 75%);background-size:200% 100%;}

/* ── Layer 3: Component ─────────────────────────────────────────────
   Component-specific tokens derived from semantic layer.
   Use these for per-component overrides without touching semantics.
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* Border-radius — named by semantic role */
  --card-radius: var(--prim-radius-xl);
  --radius-lg:   var(--prim-radius-2xl);

  /* Elevation (shadows) */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.15);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.2);

  /* Focus rings */
  --focus-ring:         0 0 0 3px rgba(244,200,66,0.25);
  --focus-ring-primary: 0 0 0 3px rgba(15,23,36,0.25);

  /* Motion */
  --transition: all var(--prim-duration-normal) var(--prim-ease-spring);

  /* Dashboard panel tokens */
  --dash-border: rgba(240,235,224,0.9); /* card borders */
  --dash-sep:    #F3F4F6;               /* divider lines */
  --dash-sub:    #F9FAFB;               /* sub-section bg */
  --dash-track:  #F3F4F6;               /* progress bar tracks */
}

[data-theme="dark"] {
  --dash-border: rgba(255,255,255,0.06);
  --dash-sep:    rgba(255,255,255,0.06);
  --dash-sub:    #1C2128;
  --dash-track:  #21262D;
}

/* ── Notification panel rows ────────────────────────────────────── */
.notif-row { transition:background 0.12s; }
.notif-row:hover { background:rgba(0,0,0,0.04); }
[data-theme="dark"] .notif-row:hover { background:rgba(255,255,255,0.05); }

/* ── Dark overrides — More sheet ────────────────────────────────── */
[data-theme="dark"] .mob-more-item { background:#1C2128; border-color:rgba(255,255,255,0.08); }
[data-theme="dark"] .mob-more-item:hover { background:rgba(244,200,66,0.12); }
[data-theme="dark"] .mobile-more-handle { background:#30363D; }

/* ── Dark overrides — Buttons & icon-btn ────────────────────────── */
[data-theme="dark"] .btn-secondary { background:rgba(255,255,255,0.06); border-color:rgba(244,200,66,0.25); }
[data-theme="dark"] .btn-secondary:hover:not(:disabled) { background:rgba(255,255,255,0.1); border-color:var(--accent); box-shadow:0 6px 16px rgba(244,200,66,0.15); }
[data-theme="dark"] .btn-ghost { color:var(--muted); }
[data-theme="dark"] .btn-ghost:hover { background:rgba(255,255,255,0.06); color:var(--ink); }
[data-theme="dark"] .icon-btn { border-color:rgba(255,255,255,0.08); color:var(--ink); }
[data-theme="dark"] .icon-btn:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); }