/* Breakpoints (CSS variables cannot be used in @media, so keep these in sync by hand):
   48em = tablet and up (two columns, sticky bar hidden); 64em = desktop. */
/* Loonwick Web design tokens. Every color, size, space, radius, shadow and
   duration used on the site lives here. Other CSS files use var(--...) only. */
:root {
  /* Color: surfaces */
  --c-ink: #0b0f14;          /* dark panels, text on light */
  --c-paper: #f8fafc;        /* page background (off-white stock) */
  --c-white: #ffffff;        /* cards, fields */
  --c-ink-2: #131922;        /* raised panels on ink */
  --c-mist: #eef2f6;         /* light alternate section background */
  /* Color: ink (crimson is the only brand color) */
  --c-crimson: #991b1b;      /* buttons, links on light */
  --c-crimson-bright: #ef4444; /* accent on dark ONLY */
  /* Color: text */
  --c-text: #374151;         /* body copy on light */
  --c-muted: #4b5563;        /* secondary copy on light (verified, see NOTES.md) */
  --c-on-dark: #f8fafc;      /* text on ink and crimson */
  --c-on-dark-muted: #cbd5e1;/* secondary text on ink */
  /* Color: lines */
  --c-border: #e2e8f0;       /* decorative card borders (not for fields) */
  --c-field-border: #6b7280; /* input borders, 3:1+ against white */
  --c-dark-border: #2b3544;  /* decorative lines on ink */
  --c-glow: rgba(239, 68, 68, 0.34);   /* crimson glow on ink, decorative */
  --c-card-border: rgba(239, 68, 68, 0.55);   /* crimson edge on web cards */
  --c-card-edge: #8c3135;   /* solid crimson edge for the angular web tiles */
  --chamfer: 1.5rem;        /* cut corner on the web tiles */
  --c-glow-soft: rgba(239, 68, 68, 0.14);
  --c-line-faint: rgba(248, 250, 252, 0.08); /* hairlines on ink */
  --c-focus-inner: #f8fafc;
  --c-focus-outer: #ef4444;

  /* Type: system stack for now. Inter (body) and Satoshi (display) are not
     licensed yet. To add them later: add @font-face rules (self-hosted files,
     no external fonts) and put the family first in these two lines only. */
  --font-body: system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Type scale (rem; 16px base): 12 (labels), 14, 16, 20, 24, 32, 44, 56 */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;
  --fs-hero: clamp(2.5rem, 9vw, var(--fs-56));
  --fs-hero-title: clamp(2rem, 6.5vw, var(--fs-44));   /* hero headline: smaller so the button stays on screen */
  --fs-h2: clamp(var(--fs-32), 6vw, var(--fs-44));
  --lh-body: 1.5;
  --lh-display: 1.08;
  --ls-display: -0.02em;
  --ls-label: 0.18em;        /* spaced uppercase micro-labels */
  --ls-label-tight: 0.08em;
  --ls-wordmark-web: 0.6em;   /* wide-spaced WEB under the name */
  --measure: 65ch;

  /* Spacing: 8px scale */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-12: 6rem;
  --s-16: 8rem;
  --gutter: 1rem;
  --section-pad: var(--s-6);
  --max-width: 75rem;   /* 1200px */
  --max-text: 45rem;    /* 720px */

  /* Shape */
  --radius-1: 0.5rem;   /* buttons, inputs */
  --radius-2: 1rem;     /* cards */
  --radius-3: 1.5rem;   /* hero panel */
  --radius-round: 50%;
  --radius-pill: 62.5rem;
  --bw: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-heavy: 4px;
  --tap: 2.75rem;       /* 44px minimum tap target */

  /* Shadow: one level, plus a crimson glow for dark panels */
  --shadow: 0 1px 2px rgba(11, 15, 20, 0.06), 0 12px 32px rgba(11, 15, 20, 0.08);
  --shadow-glow: 0 0 3rem var(--c-glow-soft);

  /* Gradients (decorative only; text never sits on a pale part) */
  --grad-hero: radial-gradient(60% 70% at 85% 10%, var(--c-glow) 0, transparent 70%),
               radial-gradient(40% 50% at 10% 100%, var(--c-glow-soft) 0, transparent 70%);
  --grad-web: radial-gradient(55% 45% at 50% 58%, var(--c-glow-soft) 0, transparent 100%); /* soft glow behind the web, fades before the top edge */
  --grad-sides: radial-gradient(32% 60% at 0% 55%, var(--c-glow) 0, transparent 100%),
                radial-gradient(32% 60% at 100% 55%, var(--c-glow) 0, transparent 100%);   /* crimson light from both edges */
  --c-dot: rgba(248, 250, 252, 0.22);
  --dot-gap: 1.75rem; --dot-r: 0.07rem;   /* fine dot grid */
  --mask-sides: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%);
  --node: 3.25rem;        /* timeline node size */
  --track: 0.25rem;       /* timeline line thickness */
  --fade-h: 9rem;         /* dark-to-light transition band */
  --grad-fade: linear-gradient(to bottom, var(--c-ink) 0, var(--c-crimson) 55%, var(--c-paper) 100%);
  --grad-panel: linear-gradient(160deg, var(--c-ink-2) 0, var(--c-ink) 100%);
  --grad-accent: linear-gradient(90deg, var(--c-crimson-bright) 0, transparent 100%);

  /* Layout sizes */
  --divider-h: 3rem;      /* band between hero and web */
  --gem: 0.75rem;         /* diamond on the divider */
  --orbit-card-h: 9rem;   /* card layout height at rest (title fills it) */
  --orbit-w: 46rem;       /* orbit stage */
  --orbit-h: 40rem;
  --orbit-r: 16.5rem;     /* ring radius */
  --orbit-card: 12rem;    /* card width at rest */
  --orbit-zoom: 20rem;    /* card layout width (text wraps here, always) */
  --orbit-rest-scale: 0.7; /* card is scaled down to this on the ring */
  --dur-zoom: 500ms;
  --dur-orbit: 120s;      /* one slow lap around the logo */
  --dur-pulse: 4s;
  --hub-size: 9rem;
  --stat-rule: 3rem;      /* short accent rule above stats */
  --hero-art-min: 20rem;
  --mark-hero: 13rem;     /* large gradient W */
  --mark-nav: 2.25rem;    /* small solid W */
  --mark-footer: 2rem;

  /* Motion: subtle glow and fade only; all disabled under reduced motion */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-glow: 9s;
  --dur-fade: 700ms;
  --dur-reveal: 900ms;    /* scroll reveal */
  --dur-burst: 1000ms;    /* web cards leaving the logo */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48em) {
  :root {
    --gutter: 1.5rem;
    --section-pad: var(--s-12);
  }
}