/* ==========================================================================
   Wilde UI - Design Tokens
   Single source of truth for color, typography, spacing, shape, and motion.
   All components read from here. Do not hardcode values in components.css.
   ========================================================================== */

:root {
  /* ---------- Typography ---------- */
  --w-font-sans: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w-font-serif: "Century Schoolbook", Georgia, "Times New Roman", serif;
  --w-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --w-line: 1.65;
  --w-measure:     66ch;

  /* ---------- Core palette ---------- */
  /* Darker slate-green: white reads at ~8.5:1 (WCAG AAA for normal text) */
  --w-bg: #3f4a44;
  --w-intro: #03380e;

  --w-white: #ffffff;

  /* Neutral scale */
  --w-slate-50:  #f8fafc;
  --w-slate-100: #f1f5f9;
  --w-slate-200: #e2e8f0;
  --w-slate-300: #cbd5e1;
  --w-slate-400: #94a3b8;
  --w-slate-500: #64748b;
  --w-slate-600: #475569;
  --w-slate-700: #334155;
  --w-slate-800: #1e293b;
  --w-slate-900: #0f172a;

  /* Accents */
  --w-blue-500:    #3b82f6;
  --w-blue-600:    #2563eb;
  --w-blue-700:    #1d4ed8;
  --w-emerald-600: #059669;
  --w-emerald-700: #047857;
  --w-indigo-600:  #4f46e5;
  --w-amber-600:   #d97706;
  --w-pink-600:    #db2777;

  /* Ink / surface aliases */
  --w-ink:    var(--w-slate-900);
  --w-ink-2:  var(--w-slate-700);
  --w-ink-3:  var(--w-slate-500);

  --w-blue:    var(--w-blue-600);
  --w-indigo:  var(--w-indigo-600);
  --w-emerald: var(--w-emerald-600);
  --w-amber:   var(--w-amber-600);
  --w-pink:    var(--w-pink-600);
  --w-accent:  var(--w-blue-600);

  /* ---------- On-dark text ---------- */
  /* Body copy is pure white; shadow (not opacity) carries hierarchy. */
  --w-text-clarity:   0 1px 2px rgba(0, 0, 0, .55), 0 3px 18px rgba(0, 0, 0, .32);


  /* ---------- Dark panel surfaces (cards, core-values, bg-* on personal site) ---------- */
  /* Complementary to --w-bg (slate-green) - using slate-blue for tonal contrast. */
  --w-panel:        #1e293b;          /* slate-800 - primary card surface */
  --w-panel-2:      #2a3547;          /* hover / lifted state */
  --w-panel-3:      #0f172a;          /* deep / nested */
  --w-panel-border: rgba(255, 255, 255, .12);
  --w-panel-border-hover: rgba(96, 165, 250, .55);
  --w-panel-shadow: 0 4px 12px rgba(0, 0, 0, .25), 0 14px 36px rgba(0, 0, 0, .28);
  --w-panel-shadow-hover: 0 6px 16px rgba(0, 0, 0, .30), 0 22px 50px rgba(0, 0, 0, .36);

  /* On-panel text: body copy pure white; metadata gets ONE honest muted tier
     (solid slate-300, ~9.6:1 on --w-panel, AAA for normal text). Hierarchy via
     weight/size for copy, via the muted tier for metadata only. */
  --w-on-panel:        var(--w-white);
  --w-on-panel-muted:  #cbd5e1;
  --w-on-panel-dim:    #cbd5e1;

  /* Brighter accent shades that read on dark panels (vs the -600 base used on light) */
  --w-blue-bright:    #60a5fa;        /* blue-400 */
  --w-indigo-bright:  #818cf8;        /* indigo-400 */
  --w-emerald-bright: #34d399;        /* emerald-400 */
  --w-amber-bright:   #fbbf24;        /* amber-400 */
  --w-pink-bright:    #f472b6;        /* pink-400 */

  /* ---------- Links (links are citations: one grammar per surface) ---------- */
  --w-link-on-panel:           var(--w-blue-bright);
  --w-link-underline-on-panel: rgba(96, 165, 250, .55);

  /* ---------- Key Areas of Life (semantic accents; mapping is canon in
     docs/ONTOLOGY.md: Connection/Spirituality/Science/Information/Arts) ------- */
  --w-area-connection:   var(--w-blue-bright);
  --w-area-spirituality: var(--w-indigo-bright);
  --w-area-science:      var(--w-emerald-bright);
  --w-area-information:  var(--w-amber-bright);
  --w-area-arts:         var(--w-pink-bright);

  /* ---------- Page surfaces (scoped one-offs, promoted from components.css) ---------- */
  --w-surface-footer:      #0b1220;   /* site footer */
  --w-surface-unlisted:    #2c2f38;   /* unlisted page canvas */
  --w-surface-portfolio:   #eef0f2;   /* portfolio light canvas */
  --w-surface-panel-light: #fafbfc;   /* portfolio skills panel */

  /* ---------- Lines ---------- */
  --w-line-dark:  rgba(15, 23, 42, .10);
  --w-line-light: rgba(255, 255, 255, .16);

  /* ---------- Shape ---------- */
  --w-radius:    14px;
  --w-radius-sm: 10px;
  --w-radius-lg: 20px;
  --w-radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --w-shadow-sm:   0 4px 14px rgba(0, 0, 0, .10);
  --w-shadow:      0 10px 30px rgba(0, 0, 0, .16);
  --w-shadow-soft: 0 6px 18px rgba(0, 0, 0, .12);
  --w-shadow-lift: 0 18px 40px rgba(15, 23, 42, .16);

  /* ---------- Focus ---------- */
  --w-focus: #60a5fa;
  --w-focus-ring: 0 0 0 3px rgba(96, 165, 250, .50);
  --w-focus-ring-strong: 0 0 0 3px rgba(96, 165, 250, .85);

  /* ---------- Spacing ---------- */
  --w-space-1:  .25rem;
  --w-space-2:  .5rem;
  --w-space-3:  .75rem;
  --w-space-4:  1rem;
  --w-space-5:  1.25rem;
  --w-space-6:  1.5rem;
  --w-space-8:  2rem;
  --w-space-10: 2.5rem;
  --w-space-12: 3rem;
  --w-space-16: 4rem;
  --w-space-20: 5rem;

  /* ---------- Layout ---------- */
  --w-container:     72rem;
  --w-container-narrow: 58rem;
  --w-gutter:        1.25rem;

  /* Grid sizing: minimum card width before wrapping */
  --w-grid-min:      18rem;
  --w-grid-min-4:    14rem;
  --w-grid-gap:      1.25rem;

  /* Card sizing inside auto-fit grids */
  --w-card-link-w:   20rem;
  --w-card-pad:      1.25rem;
  --w-card-radius:   var(--w-radius);

  /* ---------- Motion ---------- */
  --w-transition-fast: .12s ease;
  --w-transition:      .18s ease;
}