/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — hacker-writer-creator

   Single source of truth for the entire visual system.
   To redesign the site, change this file. Everything else references it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark mode (default) ─────────────────────────────────────────────────── */
:root {
  /* Palette — warm-saturated near-blacks (Hobday: never pure black/white) */
  --color-bg:          #0e0e0c;
  --color-bg-raised:   #161614;     /* cards, surfaces above bg */
  --color-bg-inset:    #0a0a08;     /* recessed areas, code blocks */
  --color-fg:          #e8e4dc;     /* near-white, warm */
  --color-fg-muted:    #8a8a82;     /* secondary text */
  --color-fg-faint:    #555550;     /* tertiary text, placeholders */
  --color-accent:      #e74c3c;     /* primary action color */
  --color-accent-hover:#ef5f50;     /* accent on hover */
  --color-accent-glow: rgba(231, 76, 60, 0.22);
  --color-border:      #252520;     /* subtle borders */
  --color-border-bold: #3a3a34;     /* stronger borders */
  --color-overlay:     rgba(10, 10, 8, 0.85);

  /* Category colors — Koto-inspired, each category gets an accent */
  --color-cat-malware:   #e74c3c;   /* red — danger, malware */
  --color-cat-tooldev:   #3498db;   /* blue — engineering */
  --color-cat-industry:  #f39c12;   /* amber — insight */
  --color-cat-philosophy:#9b59b6;   /* purple — thought */

  /* Typography — SOHub-inspired: clean sans for everything, mono for code/labels */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Fluid type scale — smooth scaling between mobile (375px) and desktop (1440px) */
  --text-xs:      clamp(0.75rem,   0.7rem  + 0.15vw, 0.8125rem);  /* 12-13px */
  --text-sm:      clamp(0.8125rem, 0.77rem + 0.2vw,  0.9375rem);  /* 13-15px */
  --text-base:    clamp(1rem,      0.95rem + 0.25vw, 1.125rem);    /* 16-18px */
  --text-lg:      clamp(1.125rem,  1rem    + 0.5vw,  1.375rem);    /* 18-22px */
  --text-xl:      clamp(1.375rem,  1.15rem + 0.75vw, 1.75rem);     /* 22-28px */
  --text-2xl:     clamp(1.75rem,   1.4rem  + 1.2vw,  2.5rem);      /* 28-40px */
  --text-3xl:     clamp(2.25rem,   1.75rem + 1.8vw,  3.5rem);      /* 36-56px */
  --text-display: clamp(2.75rem,   2rem    + 2.5vw,  4.5rem);      /* 44-72px */

  /* Line height — tighter for larger text (Hobday) */
  --leading-tight:  1.1;    /* display, hero headings */
  --leading-snug:   1.25;   /* h1, h2 */
  --leading-normal: 1.4;    /* h3, h4, UI elements */
  --leading-relaxed:1.6;    /* body copy */
  --leading-loose:  1.8;    /* article prose, long reads */

  /* Letter spacing — tighter for large, wider for small caps */
  --tracking-tight:  -0.025em;  /* large headings */
  --tracking-normal:  0em;      /* body */
  --tracking-wide:    0.05em;   /* small labels, mono */
  --tracking-wider:   0.1em;    /* ALL CAPS, badges */

  /* Spacing scale — 8px grid (Hobday: measurements mathematically related) */
  --space-1:   0.25rem;    /*  4px */
  --space-2:   0.5rem;     /*  8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */

  /* Layout */
  --container-max:     85rem;   /* 1360px — wider for showcase pages */
  --container-narrow:  42rem;   /* 672px — optimal reading width (~65 chars) */
  --container-wide:    90rem;   /* 1440px — full-bleed sections */
  --container-padding: clamp(var(--space-6), 5vw, var(--space-8));
  --nav-height:        4rem;    /* 64px */

  /* Borders */
  --radius-sm:  0.25rem;   /* 4px — small elements, tags */
  --radius-md:  0.5rem;    /* 8px — cards, inputs */
  --radius-lg:  1rem;      /* 16px — large cards, modals */
  --radius-full: 9999px;   /* pills */

  /* Transitions — R—K inspired easing */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snappy:  cubic-bezier(0.625, 0.05, 0, 1);
  --ease-elastic: cubic-bezier(0.34, 2.27, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;

  /* Z-index scale */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;

  /* Shadows — none in dark mode (Hobday), we use border/surface changes */
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:          #f5f3ee;     /* warm off-white */
  --color-bg-raised:   #ffffff;
  --color-bg-inset:    #eae7e0;
  --color-fg:          #1a1918;     /* warm near-black */
  --color-fg-muted:    #6b6962;
  --color-fg-faint:    #9e9b94;
  --color-accent:      #c0392b;     /* slightly deeper red for contrast on light */
  --color-accent-hover:#a93226;
  --color-accent-glow: rgba(192, 57, 43, 0.15);
  --color-border:      #d8d4cc;
  --color-border-bold: #c0bbb2;
  --color-overlay:     rgba(245, 243, 238, 0.9);

  /* Light mode gets subtle shadows instead of surface changes */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.1);
}