/* encre theme: brutalist
 * Fluid typography using clamp() — scales smoothly from 390px to 1920px.
 * Based on encre/base.css 5-breakpoint system:
 *   phone-s (≤390): 16/18/24/32/44
 *   phone-l (430):  16/19/25/34/48
 *   tablet  (820):  17/20/26/38/54
 *   desktop (1920): 15/18/28/44/72  ← design baseline
 *   ultra   (>1920): 20/24/34/52/76
 *
 * clamp(min, preferred, max) — min=phone, max=ultra
 */
[data-theme="brutalist"] {
  /* Colors */
  --bg: #F4F4F0;
  --surface: #ffffff;
  --surface-warm: #EAE8E3;
  --fg: #060606;
  --fg-2: #1A1A18;
  --muted: #555550;
  --meta: #E61919;
  --border: #060606;
  --border-soft: #C8C6C0;
  --accent: #E61919;
  --accent-on: #F4F4F0;

  /* Fonts */
  --font-display: "Archivo Black", "Noto Sans TC", system-ui, sans-serif;
  --font-body: "Archivo", "Noto Sans TC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;
  --font-ui: "Archivo", "Noto Sans TC", system-ui, sans-serif;

  /* Fluid Type Scale
   * Formula: clamp(min-rem, calc(base + slope*vw), max-rem)
   * phone min (390px) → ultra max (1920px+)
   */
  --text-sm:  clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);      /* 12px → 14px */
  --text-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1.25rem);    /* 15px → 20px */
  --text-lg:  clamp(1.0625rem, 0.98rem + 0.35vw, 1.5rem);      /* 17px → 24px */
  --text-xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);        /* 24px → 34px */
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);            /* 32px → 52px */
  --text-3xl: clamp(2.75rem, 2rem + 3.3vw, 4.75rem);           /* 44px → 76px */

  /* Leading */
  --leading-body: 1.5;
  --leading-tight: 0.88;

  /* Tracking */
  --tracking-display: -0.04em;

  /* Radius */
  --radius-sm: 0;
  --radius-md: 0;

  /* Layout — also fluid */
  --container-max: clamp(100%, 100%, 1400px);
  --content-width: clamp(100%, 38rem + 10vw, 800px);

  /* Spacing */
  --space-1: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
  --space-2: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
  --space-4: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
  --space-6: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  --space-8: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

/* Container max for larger screens */
@media (min-width: 820px) {
  [data-theme="brutalist"] {
    --container-max: 1200px;
    --content-width: 680px;
  }
}

@media (min-width: 1921px) {
  [data-theme="brutalist"] {
    --container-max: 1400px;
    --content-width: 800px;
  }
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  [data-theme="brutalist"]:not([data-mode="light"]) {
    --bg: #0A0A08;
    --surface: #141412;
    --surface-warm: #1A1A16;
    --fg: #F4F4F0;
    --fg-2: #C8C8C4;
    --muted: #A0A098;
    --meta: #FF3333;
    --border: #F4F4F0;
    --border-soft: #333330;
    --accent: #FF3333;
  }
}

[data-theme="brutalist"][data-mode="dark"] {
  --bg: #0A0A08;
  --surface: #141412;
  --surface-warm: #1A1A16;
  --fg: #F4F4F0;
  --fg-2: #C8C8C4;
  --muted: #A0A098;
  --meta: #FF3333;
  --border: #F4F4F0;
  --border-soft: #333330;
  --accent: #FF3333;
}