/* DeadBeak DNA: design tokens, loaded before styles.css on every page.
   Hand-written; nothing is installed. Light-theme values live in themes.css.

   Identity    An independent studio: calm green-tinted near-black, one muted green accent, the beak.
   Colour      Canvas #111915 (never #000), ink-green text, green #c2ef91 only for action and status.
   Type        DM Sans for everything said; IBM Plex Mono only for code, paths, field types and status labels.
   Space       4/8/12/16/24/32/48/64/96/128.
   Elevation   Three soft shadows tinted from the canvas, never pure black.
   Motion      One easing family, short durations, only transform/opacity/clip-path.
               One entrance, one signature moment and a hover/press layer per page. Nothing else moves.
   Safety      Readable without JS, final frames under reduced motion, AA contrast in both themes,
               44px tap targets, no horizontal scroll at 320px. */
:root {
  color-scheme: dark;

  /* Palette (dark, the default theme) */
  --canvas: #111915;           /* page background (light theme: --paper) */
  --ink: #111915;              /* dark canvas; in the light theme --ink is the text colour */
  --ink-soft: #18221d;         /* raised canvas: dialogs, sheets */
  --paper: #151b18;            /* reading surface */
  --paper-panel: #1e2822;      /* card on paper */
  --paper-text: #c4cec3;       /* body text on paper */
  --paper-muted: #a3b09f;      /* secondary text on paper (AA on every dark surface) */
  --paper-heading: #dde4d8;    /* headings on paper */
  --white: #f5f6ef;            /* main text on canvas */
  --text-soft: #b5beb4;        /* body copy on canvas */
  --muted: #a5afa7;            /* secondary text on canvas (AA on every dark surface) */
  --accent-soft: #b4cba1;      /* green-tinted labels and status words */
  --green: #c2ef91;            /* the accent: actions, current state, focus */
  --green-hover: #d4f9af;      /* primary button fill on hover (about 10% brighter) */
  --on-green: #111915;         /* text on a green fill */
  --green-40: rgba(194, 239, 145, .4);
  --line: rgba(225, 237, 223, .15);  /* hairlines on canvas */
  --dark-line: #344238;        /* hairlines on paper */
  --line-strong: #5d6e56;      /* control borders, 3:1 against the canvas */
  --frame-line: #384732;       /* product frames and cards */
  --surface-1: #1b251e;        /* product frame fill */
  --surface-2: #243123;        /* featured card fill */
  --band: #263b24;             /* closing CTA band */
  --band-line: #3f5536;
  --hover-fill: #24301f;       /* outline button hover */
  --header-bg: rgba(17, 25, 21, .97);
  --backdrop: rgba(3, 10, 6, .85);
  --beak-eye: #111915;         /* the cut-out eye of the beak mark */

  /* Fonts */
  --font: 'DM Sans', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale (fluid). Nothing on the site goes below --label (11px). */
  --label: .6875rem;                                         /* 11px: mono status labels */
  --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);         /* 13-14px: small UI text, footer */
  --step-0: clamp(1rem, .97rem + .15vw, 1.0625rem);           /* 16-17px: body */
  --step-1: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);       /* 18-21px: lead, card titles */
  --step-2: clamp(1.375rem, 1.22rem + .7vw, 1.75rem);         /* 22-28px: h3 */
  --step-3: clamp(1.75rem, 1.43rem + 1.4vw, 2.5rem);          /* 28-40px: small h2 */
  --step-4: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);           /* 36-56px: h2 */
  --step-5: clamp(2.75rem, 1.75rem + 4.6vw, 5.25rem);         /* 44-84px: h1 */
  --leading-body: 1.65;
  --leading-heading: 1.08;
  --measure: 65ch;
  --track-display: -.04em;
  --track-h2: -.02em;
  --track-body: 0;
  --track-label: .06em;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius */
  --radius-1: 3px;
  --radius-2: 6px;

  /* Elevation, tinted from the canvas */
  --shadow-1: 0 1px 2px rgba(5, 12, 8, .45);
  --shadow-2: 0 16px 32px -18px rgba(5, 12, 8, .7);
  --shadow-3: 0 35px 70px -30px rgba(4, 10, 6, .75);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* entrances */
  --ease-ui: cubic-bezier(.2, .8, .2, 1);     /* hover, press, panels */
  --dur-press: 90ms;
  --dur-out: 120ms;
  --dur-in: 150ms;
  --dur-panel: 220ms;
  --dur-enter: 520ms;
  --dur-hero: 700ms;

  /* Chrome */
  --header-h: 72px;
  --subnav-h: 48px;
  --gutter: 48px;

  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (max-width: 1100px) { :root { --gutter: 32px; } }
@media (max-width: 800px) { :root { --gutter: 20px; } }
@media (max-width: 639.98px) { :root { --header-h: 56px; --subnav-h: 44px; } }
@media (max-width: 400px) { :root { --gutter: 16px; } }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }