/* ============================================================
   DARKIEE BRAND SYSTEM — SHARED DESIGN TOKENS
   dark-first  •  orange × purple  •  deepakpatidar.in

   Single source of truth for every page. Load this BEFORE the
   page stylesheet:  <link rel="stylesheet" href="/assets/css/tokens.css">

   Canonical breakpoints (use these, don't invent new ones):
     480px (small phones) • 768px (mobile nav) • 1024px (tablet/desktop)
   ============================================================ */

/* ── Design tokens (dark default) ─────────────────────────── */
:root {
  /* Brand anchors */
  --brand-orange:        #f77f03;
  --brand-orange-light:  #ff8d28;
  --brand-purple:        #8b5cf6;
  --brand-purple-deep:   #6d28d9;

  /* Semantic — dark base (default) */
  --c-bg:           #0e1626;
  --c-surface:      #1f2a3d;
  --c-surface-alt:  #18233a;
  --c-text:         #f1f5f9;
  --c-muted:        #a8b5c9;
  --c-accent:       #ff8d28;
  --c-accent-glow:  rgba(247, 127, 3, 0.18);
  --c-border:        rgba(255, 255, 255, 0.14);
  --c-border-strong: rgba(255, 255, 255, 0.24);
  --c-shadow-sm:    0 2px 8px rgba(0,0,0,0.35);
  --c-shadow-md:    0 8px 24px rgba(0,0,0,0.45);
  --c-shadow-lg:    0 20px 50px rgba(0,0,0,0.55);
  --c-nav:          rgba(15, 23, 42, 0.95);
  --c-skills-bg:    linear-gradient(135deg, #0d1929 0%, #1a0f2e 100%);
  --c-footer-bg:    #060d1a;
  --c-selection-text: #0f172a;

  /* Brand gradients */
  --g-brand:       linear-gradient(90deg,  #ff8d28 0%, #8b5cf6 100%);
  --g-brand-diag:  linear-gradient(135deg, #ff8d28 0%, #8b5cf6 100%);
  --g-brand-soft:  linear-gradient(135deg, rgba(247,127,3,0.12) 0%, rgba(139,92,246,0.12) 100%);

  /* Radii */
  --radius-sm:   0.5rem;
  --radius-md:   1.2rem;
  --radius-lg:   1.6rem;
  --radius-pill: 9999px;

  /* Spacing scale (10px rem base: html { font-size: 62.5% }) */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;
}

/* ── Light theme — AA-compliant brand overrides ───────────── */
[data-theme="light"] {
  --c-bg:           #f8fafc;
  --c-surface:      #ffffff;
  --c-surface-alt:  #f1f5f9;
  --c-text:         #0f172a;
  --c-muted:        #475569;
  --c-accent:       #c96200;
  --c-accent-glow:  rgba(201, 98, 0, 0.12);
  --c-border:        #e2e8f0;
  --c-border-strong: #cbd5e1;
  --c-shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --c-shadow-md:    0 8px 24px rgba(0,0,0,0.09);
  --c-shadow-lg:    0 20px 50px rgba(0,0,0,0.13);
  --c-nav:          rgba(248, 250, 252, 0.95);
  --c-skills-bg:    linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  --c-footer-bg:    #06061a;
  --c-selection-text: #ffffff;
}

/* ── Shared base rules ─────────────────────────────────────── */
*::selection {
  background: var(--c-accent);
  color: var(--c-selection-text);
}

*:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

html::-webkit-scrollbar       { width: 0.8rem; }
html::-webkit-scrollbar-track { background: var(--c-bg); }
html::-webkit-scrollbar-thumb {
  background: var(--g-brand);
  border-radius: 4px;
}

/* Firefox has no ::-webkit-scrollbar; give it the branded colors.
   Guarded so Chromium keeps the gradient thumb above (setting
   scrollbar-color there would disable the webkit styling). */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-orange) var(--c-bg);
  }
}