/* Hallmark · v1.1.0 · tokens.css
 * 
 * DNA Source: Synthesized from dylanberry.com + anthropic.com/news/ + Newsreader font
 * Genre: editorial
 * Macrostructure: Letter
 * Theme: custom (vibe: technical · concrete · competent · brutalist)
 * Paper: oklch(96% 0.01 80) — light warm
 * Accent: oklch(55% 0.15 260) — indigo-blue
 * Display: Newsreader 700 (serif)
 * Body: IBM Plex Sans 400 (sans)
 * Label: JetBrains Mono (monospace)
 * Nav: N9 Edge-aligned minimal
 * Footer: Ft5 Statement
 * 
 * Diversification axes: paper-band=light / display-style=heavy-sans / accent-hue=indigo
 * 
 * Generated for: Ollie Fritz personal blog (Pelican + neobrutalish theme)
 * Date: 2026-07-16
 */

/* ==========================================================================
   COLOUR TOKENS — OKLCH only
   ==========================================================================
   
   Anchor hue: 80 (warm) for paper, 260 (indigo) for accent
   Paper band: light (96% lightness)
   Accent footprint: small (≤5% of viewport)
*/

:root {
  /* --- Paper (base surface) --- */
  --color-paper:      oklch(96%  0.01  80);
  --color-paper-2:    oklch(93%  0.012 80);
  --color-paper-3:    oklch(90%  0.014 80);
  
  /* --- Ink (primary text) — near-black, warm tint --- */
  --color-ink:        oklch(10%  0.01  60);
  --color-ink-2:      oklch(14%  0.01  60);
  --color-ink-3:      oklch(18%  0.01  60);
  
  /* --- Neutrals (steps between paper and ink) --- */
  --color-rule:       oklch(85%  0.008 80);
  --color-neutral:    oklch(55%  0.008 80);
  --color-neutral-2:  oklch(45%  0.008 70);
  --color-muted:      oklch(30%  0.006 70);
  --color-muted-2:    oklch(40%  0.006 70);
  
  /* --- Accent (indigo-blue, used sparingly) --- */
  --color-accent:     oklch(55%  0.15 260);
  --color-accent-2:   oklch(60%  0.12 260);
  --color-accent-3:   oklch(65%  0.10 260);
  
  /* --- Focus states (3:1 contrast minimum) --- */
  --color-focus:      oklch(55%  0.19 260);
  
  /* --- Semantic colour roles --- */
  --color-background: var(--color-paper);
  --color-foreground: var(--color-ink);
  --color-border:     var(--color-rule);
  --color-text:       var(--color-ink);
  --color-text-2:     var(--color-ink-2);
  --color-text-muted: var(--color-muted);
  --color-link:       var(--color-accent);
  --color-link-hover: var(--color-accent-2);
  
  /* ==========================================================================
     FONT TOKENS
     ==========================================================================
     
     Display: Newsreader 700 (serif) — editorial headlines
     Body: IBM Plex Sans 400 (sans) — technical readability
     Label: JetBrains Mono (monospace) — technical references
     
     Weights: 400 (regular), 500 (medium), 700 (bold)
  */
  
  --font-display:    'Newsreader', Georgia, serif;
  --font-body:      'IBM Plex Sans', system-ui, sans-serif;
  --font-label:     'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-code:      var(--font-label);
  
  /* Font weight tokens */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --font-weight-heavy:  700;
  
  /* ==========================================================================
     SPACING TOKENS — 4pt scale
     ==========================================================================
     
     Base unit: 4px (0.25rem)
     Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 256
  */
  
  --space-xxs:  0.5rem;   /* 8px */
  --space-xs:   0.75rem;  /* 12px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.5rem;   /* 24px */
  --space-lg:   2rem;     /* 32px */
  --space-xl:   3rem;     /* 48px */
  --space-2xl:  4rem;     /* 64px */
  --space-3xl:  6rem;     /* 96px */
  --space-4xl:  8rem;     /* 128px */
  --space-5xl:  12rem;    /* 192px */
  
  /* Section spacing (between major sections) */
  --space-section: var(--space-4xl);
  --space-section-sm: var(--space-3xl);
  
  /* ==========================================================================
     TYPOGRAPHY TOKENS
     ==========================================================================
     
     Type scale based on 1.250 major third (20px base = 1.25rem)
     Measure: 60-65ch for body text
     Line-height: 1.5-1.65 for body
  */
  
  --text-xs:     0.75rem;   /* 12px */
  --text-sm:     0.875rem;  /* 14px */
  --text-base:   1rem;      /* 16px */
  --text-lg:     1.125rem;  /* 18px */
  --text-xl:     1.25rem;   /* 20px */
  --text-2xl:    1.5rem;    /* 24px */
  --text-3xl:    1.875rem;  /* 30px */
  --text-4xl:    2.25rem;   /* 36px */
  --text-5xl:    3rem;      /* 48px */
  --text-6xl:    3.75rem;   /* 60px */
  --text-7xl:    4.5rem;    /* 72px */
  --text-display: clamp(2rem, 3.5vw + 1rem, 2.75rem);
  --text-display-s: clamp(1.75rem, 3vw + 0.75rem, 2.25rem);
  
  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:    1.75;
  
  /* Display line height (tight for impact) */
  --lh-display:  var(--lh-tight);
  
  /* Body measure (max-width for text) */
  --measure-sm:  45ch;
  --measure-md:  60ch;
  --measure-lg:  65ch;
  --measure-body: var(--measure-md);
  
  /* ==========================================================================
     BORDER TOKENS
     ==========================================================================
     
     Brutalist aesthetic: visible borders, not hairlines
  */
  
  --border-width-thin:  1px;
  --border-width-md:    2px;
  --border-width-thick: 3px;
  --border-width-slab:  4px;
  
  --border-radius-none: 0;
  --border-radius-sm:   0.125rem; /* 2px */
  --border-radius-md:   0.25rem;  /* 4px */
  --border-radius-lg:   0.375rem; /* 6px */
  --border-radius-xl:   0.5rem;    /* 8px */
  --border-radius-full: 9999px;
  
  /* ==========================================================================
     SHADOW TOKENS
     ==========================================================================
     
     Brutalist: minimal shadows, structural not decorative
  */
  
  --shadow-none: 0 0 rgba(0, 0, 0, 0);
  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:   0 2px 4px 0 rgba(0, 0, 0, 0.08);
  
  /* ==========================================================================
     MOTION TOKENS
     ==========================================================================
     
     Motion stance: motion-cut (minimal, deliberate)
     Reduced motion: respects prefers-reduced-motion
  */
  
  --dur-instant: 0ms;
  --dur-fast:    120ms;
  --dur-normal:  180ms;
  --dur-slow:    250ms;
  --dur-slower:  350ms;
  
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */
  
  --z-base:     0;
  --z-raised:   10;
  --z-drop:     20;
  --z-sticky:   30;
  --z-fixed:    40;
  --z-modal:    50;
  --z-tooltip:  60;
  
  /* ==========================================================================
     LAYOUT TOKENS
     ========================================================================== */
  
  /* Max widths */
  --max-width-xs: 20rem;   /* 320px */
  --max-width-sm: 24rem;   /* 384px */
  --max-width-md: 28rem;   /* 448px */
  --max-width-lg: 32rem;   /* 512px */
  --max-width-xl: 36rem;   /* 576px */
  --max-width-2xl: 42rem;  /* 672px */
  --max-width-3xl: 48rem;  /* 768px */
  --max-width-4xl: 56rem;  /* 896px */
  --max-width-5xl: 64rem;  /* 1024px */
  --max-width-6xl: 72rem;  /* 1152px */
  --max-width-prose: var(--measure-body);
  
  /* Content width for Letter macrostructure */
  --content-width: min(100%, 42rem);

  /* ==========================================================================
     CODE BLOCK TOKENS
     ==========================================================================

     Dark block pairs with the monokai pygment theme (pygment.css)
  */

  --color-code-bg:   #272822;
  --color-code-text: #f8f8f2;
}

/* ==========================================================================
   DARK MODE ADAPTATION
   
   Brutalist principle: dark mode is a tint, not a different theme
   Same hue anchor, inverted lightness
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Paper: neutral dark grey (user-tuned) */
    --color-paper:      oklch(24%  0     0);
    --color-paper-2:    oklch(28%  0     0);
    --color-paper-3:    oklch(32%  0     0);

    /* Ink becomes light, faint warm tint */
    --color-ink:        oklch(94%  0.005 80);
    --color-ink-2:      oklch(90%  0.005 80);
    --color-ink-3:      oklch(85%  0.005 80);

    /* Rule lightened to stay visible on 24% paper */
    --color-rule:       oklch(36%  0     0);
    --color-neutral:    oklch(62%  0.005 80);
    --color-neutral-2:  oklch(52%  0.005 80);
    --color-muted:      oklch(70%  0.005 80);
    --color-muted-2:    oklch(58%  0.005 80);

    /* Accent: reduce chroma, increase lightness for dark mode */
    --color-accent:     oklch(62%  0.12 260);
    --color-accent-2:   oklch(68%  0.10 260);
    --color-accent-3:   oklch(72%  0.08 260);

    --color-focus:      oklch(68%  0.15 260);

    /* Code block: one step lighter than paper so blocks read as panels */
    --color-code-bg:    oklch(31%  0.01  90);
    --color-code-text:  oklch(95%  0.01  90);
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:    100ms;
    --dur-normal:  100ms;
    --dur-slow:    100ms;
    --dur-slower:  100ms;
  }
}