/* ==========================================================================
   Design tokens: danielesambu.com
   --------------------------------------------------------------------------
   Every color, size, space, radius and duration on the site comes from here.
   Pages and components reference these names only; no raw hex values or
   pixel font sizes live anywhere else.

   This file holds custom properties and nothing else, so other apps (for
   example lab.danielesambu.com) can import it on its own.

   Theme switching: light is the default. Dark applies when the OS asks for
   it (and the visitor has not picked light), or when data-theme="dark" is
   set on <html>. The two dark blocks below are identical on purpose; keep
   them in sync.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Color: neutrals (warm paper, deep ink) ---------------------------- */
  --paper: #faf9f6;          /* page background */
  --surface: #f2f0ea;        /* quiet raised surface: screenshots, code */
  --line: #dedad1;           /* hairlines and dividers (decorative) */
  --line-strong: #8f8b82;    /* control borders, 3:1 on paper */

  --ink: #0c0d0e;            /* headings, strongest text        18.5:1 */
  --ink-2: #3b3e41;          /* body text                       10.2:1 */
  --ink-3: #5f6367;          /* captions, metadata, labels       5.8:1 */

  /* ---- Color: brand ------------------------------------------------------ */
  /* Rainforest green: growth, calm, abundance. */
  --accent: #046c4e;         /* links, primary actions           6.1:1 */
  --accent-strong: #03573f;  /* hover and pressed                8.2:1 */
  --accent-tint: #e3efe9;    /* selection, subtle highlight fill */
  --on-accent: #faf9f6;      /* text on an accent fill           6.1:1 */

  /* Raffia gold: small moments only. In light mode it is decorative
     (2.5:1 on paper), so any gold text uses --gold-ink instead. */
  --gold: #c8963e;
  --gold-ink: #8a5d17;       /*                                  5.5:1 */
  --wing-edge: #03573f;      /* the mark's wing edges and veins */

  --focus: var(--accent);

  /* Book cloth for poetry covers: physical objects, so the same in both
     themes. Cover text on each cloth is above 7:1. */
  --cloth-green: #0f4a38;
  --cloth-umber: #5a3a22;
  --cloth-ink: #1b1d20;
  --cloth-text: #efe6d2;
  --page-shade: rgb(12 13 14 / 0.18);   /* gutter and turning-page shadow */

  /* ---- Type: families ---------------------------------------------------- */
  /* Serif for display and poetry, sans for UI and body, mono in small,
     deliberate doses (metrics, dates, code, technical labels). Each stack
     starts with a metric-matched local fallback (see site.css) so the swap
     to the web font does not move anything. */
  --font-serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type: scale ------------------------------------------------------- */
  /* Fluid modular scale. 16px with a 1.18 ratio at 360px wide, growing to
     18px with a 1.2 ratio at 1440px. These nine steps are the only font
     sizes on the site. */
  --step-n2: clamp(0.7182rem, 0.6972rem + 0.0934vw, 0.7813rem); /* 11.5 to 12.5px */
  --step-n1: clamp(0.8475rem, 0.8174rem + 0.1334vw, 0.9375rem); /* 13.6 to 15px */
  --step-0:  clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);       /* 16 to 18px */
  --step-1:  clamp(1.18rem, 1.1233rem + 0.2519vw, 1.35rem);     /* 18.9 to 21.6px */
  --step-2:  clamp(1.3924rem, 1.3165rem + 0.3372vw, 1.62rem);   /* 22.3 to 25.9px */
  --step-3:  clamp(1.643rem, 1.5427rem + 0.4459vw, 1.944rem);   /* 26.3 to 31.1px */
  --step-4:  clamp(1.9388rem, 1.8074rem + 0.5837vw, 2.3328rem); /* 31 to 37.3px */
  --step-5:  clamp(2.2878rem, 2.1172rem + 0.7579vw, 2.7994rem); /* 36.6 to 44.8px */
  --step-6:  clamp(2.6996rem, 2.4797rem + 0.9773vw, 3.3592rem); /* 43.2 to 53.7px */

  --leading-tight: 1.15;     /* display headings */
  --leading-snug: 1.35;      /* subheads, UI */
  --leading: 1.6;            /* body copy */
  --leading-verse: 1.75;     /* poetry */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -0.015em; /* large serif */
  --tracking-label: 0.08em;   /* small uppercase mono labels */

  /* ---- Space ------------------------------------------------------------- */
  /* A 4px base. The two fluid values at the end handle page rhythm. */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.9vw, 3.5rem); /* 20px at 360, 48px at 1440 */

  /* ---- Layout ------------------------------------------------------------ */
  --measure: 68ch;           /* prose column */
  --measure-narrow: 44ch;    /* poems, one-line subtitles */
  --wrap: 120rem;            /* content spans the window; only very wide screens cap it */
  --wrap-wide: 120rem;
  --header-h: 4rem;

  /* ---- Shape ------------------------------------------------------------- */
  --radius-sm: 6px;          /* small things: tags, inline code, focus rings */
  --radius: 8px;             /* buttons, inputs, images, cards */
  --radius-round: 999px;     /* icon buttons only */
  --hairline: 1px;
  --shadow: 0 1px 2px rgb(12 13 14 / 0.04);   /* barely there, or none */
  --shadow-float: 0 12px 32px -16px rgb(12 13 14 / 0.22); /* menus only */

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rise: 6px;               /* the only translate distance */
}

/* ---- Dark: follows the OS unless the visitor chose light ----------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0c0d0e;
    --surface: #161819;
    --line: #2a2d2f;
    --line-strong: #6b6e70;
    --ink: #eceae4;
    --ink-2: #bdbbb4;
    --ink-3: #8f8e89;
    --accent: #2fbf8f;
    --accent-strong: #5fd3aa;
    --accent-tint: #11261e;
    --on-accent: #0c0d0e;
    --gold: #d4a24c;
    --gold-ink: #d4a24c;
    --wing-edge: #1f8a66;
    --shadow: none;
    --shadow-float: 0 12px 32px -12px rgb(0 0 0 / 0.7);
    --page-shade: rgb(0 0 0 / 0.45);
  }
}

/* ---- Dark: chosen explicitly with the toggle ----------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0c0d0e;
  --surface: #161819;
  --line: #2a2d2f;
  --line-strong: #6b6e70;
  --ink: #eceae4;
  --ink-2: #bdbbb4;
  --ink-3: #8f8e89;
  --accent: #2fbf8f;
  --accent-strong: #5fd3aa;
  --accent-tint: #11261e;
  --on-accent: #0c0d0e;
  --gold: #d4a24c;
  --gold-ink: #d4a24c;
  --wing-edge: #1f8a66;
  --shadow: none;
  --shadow-float: 0 12px 32px -12px rgb(0 0 0 / 0.7);
  --page-shade: rgb(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --rise: 0px;
  }
}