/* ==========================================================================
   DSP Remote — design system
   --------------------------------------------------------------------------
   THIS IS THE ONLY PLACE COLORS, TYPE, SPACING, AND RADII ARE DEFINED.
   Changing the accent across the whole site is a single edit: --accent.

   DSP Remote and Deep Space Products are the same company and now use one
   visual system. Every value here is taken from the real DSP Payload repo
   (~/Developer/MacObservatory/DSPCommerce): surfaces, borders, type colors,
   brand colors, radius, and the type stack. There is no separate DSPR accent.

   Gold and red are not interchangeable, and are used the way DSP uses them:

     - gold #b8976a   interactive and accent — buttons, links, icons, focus
                      rings, table headers, active states
     - red  #a01e22   small uppercase brand labels only — eyebrows, tier
                      labels, gallery badges, footer column headings

   Contrast note: DSP's red (#a01e22) measures 2.5:1 against this background,
   which is below the WCAG AA minimum of 4.5:1 for normal text. It is used
   here anyway, on the owner's instruction, because matching DSP exactly
   matters more than the guideline and because DSP itself ships this. It is
   confined to short uppercase labels that repeat the adjacent heading, never
   to running copy. --rust-text exists so that decision can be reversed in a
   single edit. The gold measures 7.1:1 and is unaffected.
   ========================================================================== */

:root {
  /* ── ground ────────────────────────────────────────────────────
     Deep Space Products' surfaces, value for value.
     ─────────────────────────────────────────────────────────── */
  --black: #07080f;          /* dsp-bg — page background */
  --panel: #0e1018;          /* dsp-bg-raised — cards, raised surfaces */
  --panel-2: #141620;        /* dsp-bg-elevated — elevated surfaces */
  --surface-menu: #0c0d10;   /* dropdown panels */
  --surface-hover: #111316;  /* row and card hover */
  --footer-bg: #07080f;
  --header-bg: rgba(7, 8, 15, 0.9);      /* DSP header: #07080f/90 + blur */
  --html-bg: #0e0f12;        /* gutter behind the 1920px page cap */

  /* ── type colors ───────────────────────────────────────────── */
  --ink: #f0ece4;            /* dsp-text-bright — display type */
  --ink-ui: #d8d4cc;         /* strong body, ui labels */
  --slate: #999999;          /* dsp prose body copy */
  --slate-muted: #888888;    /* dsp-text-muted — nav, secondary ui */
  --slate-dim: #6a6864;      /* captions, meta, disabled */

  /* ── brand ─────────────────────────────────────────────────────
     Deep Space Products' own palette, used the way DSP uses it: gold is the
     interactive/accent color (buttons, links, icons), and the red is reserved
     for small uppercase brand labels — eyebrows, tier labels, footer column
     headings. They are not interchangeable.
     ─────────────────────────────────────────────────────────── */
  --accent: #b8976a;         /* DSP gold */
  --accent-hover: #d4b07a;   /* DSP gold-light */
  --accent-deep: #7a6844;    /* DSP gold-dim */
  --accent-dim: rgba(184, 151, 106, 0.15);

  --rust: #a01e22;           /* DSP's brand red, exactly as DSP ships it */
  --rust-text: #a01e22;      /* kept as a separate token so label red can be
                                lightened in one edit if legibility bites */
  --rust-dim: rgba(160, 30, 34, 0.18);

  /* ── lines ─────────────────────────────────────────────────────
     DSP uses solid hairlines, not translucent white. --border-strong is
     DSP's warm card-hover border.
     ─────────────────────────────────────────────────────────── */
  --border: #1c1c1e;         /* dsp-border */
  --border-subtle: #151518;  /* dsp-border-subtle */
  --border-strong: #3a3428;  /* DSP card hover border */

  /* ── status ────────────────────────────────────────────────── */
  --success: #5a9a6a;        /* dsp-green */
  --info: #5a8aaa;           /* dsp-blue */
  --error: #bb3333;          /* DSP --destructive */

  /* ── type ──────────────────────────────────────────────────────
     Matches Deep Space Products exactly: Georgia for serif display,
     Geist for all UI and body copy. Geist is self-hosted as a single
     variable woff2 (see fonts.css); Georgia is a system face, so display
     type renders instantly with no webfont cost.
     ─────────────────────────────────────────────────────────── */
  --font-display: Georgia, "Times New Roman", serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --fs-eyebrow: 0.72rem;
  --fs-micro: 0.78rem;
  --fs-small: 0.86rem;
  --fs-body: 1rem;
  --fs-lead: 1.06rem;
  --fs-h4: 1.35rem;
  --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.55rem);
  --fs-h1: clamp(2.1rem, 5vw, 3.4rem);
  --fs-hero: clamp(2.5rem, 5.6vw, 4rem);

  --lh-tight: 1.14;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  --ls-eyebrow: 0.2em;
  --ls-button: 0.1em;
  --ls-nav: 0.06em;

  /* ── spacing ───────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5.75rem;

  --section-y: 5.75rem;
  --section-y-tight: 3.5rem;

  /* ── radii ─────────────────────────────────────────────────────
     DSP defines --radius: 2px and derives the rest from it. The near-square
     corners are what make the brand read as precision instrumentation
     rather than generic web software.
     ─────────────────────────────────────────────────────────── */
  --radius: 2px;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  /* ── layout ────────────────────────────────────────────────── */
  --maxw: 1140px;            /* DSP's container width */
  --maxw-page: 1920px;       /* DSP caps the page and shows gutters beyond */
  --maxw-narrow: 760px;
  --maxw-prose: 44rem;
  --header-h: 76px;

  /* ── motion ────────────────────────────────────────────────── */
  --t-fast: 0.15s ease;
  --t-med: 0.18s ease;

  /* ── elevation ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Respect a reduced-motion preference everywhere, once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}