/* ============================================================
   Wired Divergent / JendeHaan.com — Design Tokens
   ------------------------------------------------------------
   Final site reference: jendehaan.com (April 2026 build)
   Aesthetic: Dark teal base, subtle teal gradient text,
              rainbow spectrum reserved for dividers + bars,
              warm pastel sidebar widgets in article reading mode
   ============================================================ */

@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  /* --- Surfaces (dark teal base) --- */
  --bg-page:        #0d2a30;   /* main body background */
  --bg-card:        #123a43;   /* cards, secondary surfaces */
  --bg-input:       #07181b;   /* inputs, code, deepest surface */
  --bg-tag-dark:    #0b242a;   /* dark tag chip background */
  --bg-nav:         rgba(13, 42, 48, 0.6);     /* glass nav fill */
  --bg-nav-mega:    rgba(13, 42, 48, 0.95);    /* mega-menu fill */
  --bg-radial-glow: radial-gradient(circle at top left, rgba(16, 54, 63, 0.6) 0%, rgba(13, 42, 48, 0.5) 25%);

  /* --- Borders --- */
  --border-card:        0.5px solid #1e5e6b;
  --border-card-hover:  1px solid #1b4754;
  --border-glass:       1px solid rgba(255, 255, 255, 0.10);
  --border-faint:       1px solid rgba(255, 255, 255, 0.05);

  /* --- Text on dark --- */
  --text-primary:    #ccc;     /* body */
  --text-strong:     #fff;     /* h-spans, focused emphasis */
  --text-secondary:  #999;
  --text-tertiary:   #888;
  --text-muted:      #666;
  --text-dim:        #555;
  --text-input-ph:   #aebbc1;  /* input placeholder */

  /* --- Brand spectrum (rainbow) — for dividers, bars, gradients ONLY --- */
  --color-coral:   #E8593C;
  --color-yellow:  #F2A623;
  --color-green:   #4CAF50;
  --color-blue:    #3B8BD4;
  --color-purple:  #7B61FF;

  /* Coral primary action — pressed/hover variant */
  --color-coral-deep: #D44A2E;

  /* --- Teal gradient (used for headings + nav name + tagline shimmer) --- */
  --teal-from: #40c4b5;
  --teal-to:   #63e3d4;

  --gradient-teal-135:    linear-gradient(135deg, #40c4b5, #63e3d4);
  --gradient-teal-90:     linear-gradient(90deg,  #40c4b5, #63e3d4);

  /* --- Spectrum gradients (rules, bars, button border-image) --- */
  --gradient-spectrum-90:  linear-gradient(90deg,  #E8593C, #F2A623, #4CAF50, #3B8BD4, #7B61FF, #E8593C);
  --gradient-spectrum-180: linear-gradient(180deg, #E8593C, #F2A623, #4CAF50, #3B8BD4, #7B61FF);

  /* --- Article body (light reading surface) --- */
  --article-bg:       #e5e6e1;
  --article-text:     #111827;
  --article-secondary:#334155;
  --article-heading:  #0b383c;
  --article-quote-bg: #f1f5f9;
  --article-caption:  #555;

  /* --- Sidebar widgets (warm pastel cards inside the article column) --- */
  --widget-default-bg:    #e4f5f3;     /* mint */
  --widget-default-text:  #1a5e56;
  --widget-default-head:  #11423c;

  --widget-listen-bg:     #fae9e6;     /* warm coral pastel */
  --widget-listen-text:   #9e3520;
  --widget-listen-head:   #7a2514;
  --widget-listen-deep:   #50170c;

  --widget-promo-bg:      #fdf4e3;     /* warm yellow pastel */
  --widget-promo-text:    #996409;
  --widget-promo-head:    #734a05;
  --widget-promo-deep:    #4a2f03;

  /* --- Category tag colour pairs (article-mode pastel) --- */
  --tag-coral-bg:   #fae9e6; --tag-coral-text:   #9e3520;
  --tag-yellow-bg:  #fdf4e3; --tag-yellow-text:  #996409;
  --tag-green-bg:   #e2f5e3; --tag-green-text:   #1d6821;
  --tag-blue-bg:    #e0f0fa; --tag-blue-text:    #1c527e;
  --tag-purple-bg:  #edeafe; --tag-purple-text:  #4a3a94;

  /* --- Category tag colour pairs (saturated, used in dark blog index) --- */
  --tag-nervous:   #2e7d32;
  --tag-autistic:  #6a1b9a;
  --tag-adhd:      #f57c00;
  --tag-sensory:   #0277bd;
  --tag-somatic:   #00695c;
  --tag-science:   #546e7a;
  --tag-workplace: #283593;
  --tag-lived:     #ad1457;
  --tag-wired:     #d84315;

  /* --- Typography --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  --weight-medium: 500;
  --weight-bold:   700;

  /* Type scale (base 18px / 1.65) */
  --text-base:    18px;
  --leading-base: 1.65;

  --text-h1:  32px;
  --text-h2:  22px;
  --text-h3:  18px;

  --text-hero:        56px;   /* homepage hero h1 */
  --text-hero-narrow: 42px;   /* article-page narrow hero */
  --text-hero-desc:   20px;
  --text-tagline:     13px;   /* uppercase rainbow tagline */
  --tracking-tagline: 3px;

  --text-section-label: 11px; /* uppercase eyebrow */
  --tracking-section:   2px;

  --text-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 11px;

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;            /* hero top padding */

  /* --- Radii --- */
  --radius-pill:    40px;       /* nav, primary buttons */
  --radius-tag:     20px;       /* tags / chips */
  --radius-card:    10px;       /* cards, resource cards */
  --radius-input:   12px;       /* form inputs (textarea/input) */
  --radius-quote:   8px;        /* blockquote */
  --radius-mega:    16px;       /* mega-menu, show card */
  --radius-widget:  24px;       /* sidebar widgets, post-body */

  /* --- Shadows --- */
  --shadow-card:     0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-show:     0 24px 48px rgba(0, 0, 0, 0.2);
  --shadow-nav:      0 16px 40px rgba(0, 0, 0, 0.2);
  --shadow-mega:     0 30px 60px rgba(0, 0, 0, 0.5);
  --shadow-coral-focus: 0 0 0 2px rgba(232, 89, 60, 0.15);
  --shadow-coral-glow:  0 0 12px rgba(232, 89, 60, 0.2);

  /* --- Glass / blur --- */
  --blur-nav:    16px;
  --blur-mega:   32px;
  --blur-hero:   32px;

  /* --- Motion --- */
  --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    200ms;
  --dur-base:    300ms;
  --dur-slow:    400ms;

  /* --- Layout --- */
  --max-container: 1440px;
  --gutter:        40px;
}

/* --- Utility: gradient text helpers --- */
.grad-teal      { background: var(--gradient-teal-135); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-teal-flat { background: var(--gradient-teal-90);  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --- Utility: rainbow rules --- */
.rule-top    { height: 3px; background: var(--gradient-spectrum-90); }
.rule-mid    { height: 1px; background: var(--gradient-spectrum-90); opacity: 0.5; border: none; }
.rule-bottom { height: 1px; background: var(--gradient-spectrum-90); opacity: 0.4; border: none; }