@import url("/fonts/fonts.css");

/* ============================================================================
   Orbexa Precision Bearings — DESIGN TOKENS  (Standard of Record)
   ----------------------------------------------------------------------------
   READ-ONLY CONTRACT. This file declares custom properties and a small set of
   element-level base rules. No coding worker edits it and no page adds a class
   here. Every class name lives in /blocks.css. Nothing in this file uses a
   class selector, a `body` selector, or an `@keyframes` name that /blocks.css
   also declares — that is what keeps the two files from becoming two competing
   sources of truth (hard rule 54, check-css-conflicts.py).

   WHICH FILE OWNS WHAT
     design-tokens.css  : :root custom properties, html/b/hr/b-strong/selection,
                          :focus-visible, @keyframes, [role="dialog"] elevation
     blocks.css         : every .class in the site, appended to by page workers
     fonts.css          : the only @font-face declarations (imported above)

   CONTRAST — measured with the WCAG 2.1 relative-luminance formula.
   Every pair below that is used for TEXT is listed with its measured ratio.
   The floor is 4.5:1 for text and 3:1 for non-text UI boundaries.
   See /design-blueprint.md for the rulings behind the two values that had to
   move away from the frozen palette (#6B6B6B and #8A6A1E); the frozen swatches
   themselves are kept in this file, used only where they are not text.
   ========================================================================== */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────────
     Frozen palette + two measured corrections + the derived surfaces the
     components need. Ratios are text-vs-background pairs.                  */

  --paper: #ffffff;          /* paper white — ~70% of a screen              */
  --panel: #f5f5f3;          /* raised panel — spec tables, cert wall ~15%  */
  --panel-2: #ededea;        /* derived: one step below panel, for wells    */

  --ink: #161616;            /* 18.10:1 on paper · 16.58:1 on panel · 15.43:1 on panel-2 */
  --ink-2: #4a4a4a;          /*  8.86:1 on paper ·  8.12:1 on panel ·  7.56:1 on panel-2 */
  --ink-3: #6b6b6b;          /*  5.33:1 on paper ·  4.88:1 on panel ·  4.54:1 on panel-2
                                frozen value was #7A7A7A at 4.29:1 / 3.93:1 — below the
                                4.5:1 floor, so text uses this darkened step */
  --ink-frozen-3: #7a7a7a;   /* NON-TEXT ONLY. Decorative ticks, disabled marks,
                                rules that carry no letterform. 4.29:1 on paper */

  --rule: #e0e0e0;           /* hairline 1px — a boundary, never a text colour      */
  --rule-heavy: #161616;     /* heavy rule 2px                                      */

  --accent: #1848a8;         /* cobalt — 8.30:1 on paper · 7.60:1 on panel.
                                ~2% of a screen. Event colour: means "act here" */
  --accent-dark: #123a8a;    /* hover / pressed — 10.51:1 on paper           */
  --accent-lift: #a8c4f5;    /* cobalt family on the ink plate — 10.24:1 on --plate */

  --gold: #a8842c;           /* accreditation marks ONLY, never text.
                                3.50:1 on paper — a mark colour, not a text colour */
  --gold-ink: #8a6a1e;       /* gold text — 5.05:1 on paper · 4.62:1 on panel.
                                NOT permitted on --panel-2 (4.30:1, under the floor) */

  --plate: #161616;          /* ink plate — the modal panel, the footer        */
  --on-plate: #ffffff;       /* 18.10:1 on --plate                             */
  --on-plate-2: #d6d6d2;     /* 12.42:1 on --plate · 5.69:1 on --accent        */

  --focus: #1848a8;          /* focus ring on light surfaces                   */
  --focus-on-plate: #a8c4f5; /* focus ring on the ink plate — 10.24:1          */

  --scrim: rgba(22, 22, 22, 0.55);
  --scrim-deep: rgba(22, 22, 22, 0.9);

  /* Grading primitives. Flat paper is the site's default; these exist for the
     three places a photograph or an ink plate needs a legible text zone. */
  --grade-plate: linear-gradient(
    180deg,
    rgba(22, 22, 22, 0.08) 0%,
    rgba(22, 22, 22, 0.62) 46%,
    rgba(22, 22, 22, 0.92) 100%
  );
  --glow-accent: radial-gradient(
    120% 100% at 0% 0%,
    rgba(24, 72, 168, 0.07) 0%,
    rgba(24, 72, 168, 0) 62%
  );

  /* ── Type families ──────────────────────────────────────────────────────
     "Orbexa Symbols" sits second in every stack. It is declared with a
     unicode-range, so it is consulted only for the codepoints the three site
     families cannot draw (⁻ ⁺ ⌀ ≤ ≥ ∞ ≈ ′ ″ →); everywhere else it is skipped
     and the browser falls through to the real family.                    */
  --font-display: "Libre Bodoni", "Orbexa Symbols", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", "Orbexa Symbols", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Orbexa Symbols", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ── Type scale — the exact px values from the frozen design language ───
     h1 64/36 · h2 34/26 · h3 19/17 · lead 19/17 · body 16 · eyebrow 11 ·
     data 15/14. The "/" values are the mobile step, applied in the media
     query at the bottom of this file.                                     */
  --fs-h1: 64px;
  --fs-h2: 34px;
  --fs-h3: 19px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-eyebrow: 11px;
  --fs-data: 15px;

  --lh-h1: 1.05;
  --lh-h2: 1.15;
  --lh-h3: 1.3;
  --lh-lead: 1.6;
  --lh-body: 1.65;
  --lh-ui: 1.5;

  --tr-eyebrow: 0.12em;      /* Plex Mono eyebrow tracking                */
  --tr-title: -0.01em;       /* Bodoni display tracking, slightly closed  */
  --tr-body: 0;

  --w-display: 700;
  --w-body: 400;
  --w-body-strong: 600;
  --w-mono: 500;

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

  --section-y: 96px;         /* desktop section rhythm — never below 64px   */
  --gutter: 32px;
  --measure: 680px;          /* article limit — never widened              */

  /* ── Radii — square-corner system ───────────────────────────────────────
     The frozen language divides with rules, not corners, so the scale is two
     steps and both are honest about it: 0 everywhere, 2px only on native form
     controls, where a hard corner reads as a rendering fault. A page that
     wants a rounded card wants a different design language.              */
  --radius-0: 0px;
  --radius-1: 2px;

  /* ── Rules — the site's only structural device ──────────────────────── */
  --rule-w: 1px;
  --rule-heavy-w: 2px;
  --hair: 1px solid var(--rule);
  --heavy: 2px solid var(--ink);
  --hair-on-plate: 1px solid rgba(255, 255, 255, 0.22);

  /* ── Container — 12 columns inside this, 16px minimum to the edge ───── */
  --container: 1200px;
  --container-pad: 24px;     /* never below 16px: text must clear the edge  */

  /* ── Elevation — reserved for surfaces that genuinely float ─────────── */
  --shadow-2: 0 18px 48px rgba(22, 22, 22, 0.18), 0 2px 8px rgba(22, 22, 22, 0.1);
  --shadow-text-plate: 0 1px 2px rgba(22, 22, 22, 0.45);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);

  /* ── Controls ───────────────────────────────────────────────────────── */
  --tap: 44px;               /* every interactive target, minimum           */
  --focus-offset: 2px;
  --icon: 24px;              /* document-mark grid: 24px box, 18px live     */

  /* ── Layers ─────────────────────────────────────────────────────────── */
  --z-nav: 40;
  --z-modal: 90;
}

/* ── Element base ─────────────────────────────────────────────────────────
   Kept deliberately thin. Anything with a class name belongs in blocks.css. */

/* One box model for the whole site. Declared here, in the token layer, so that
   no component ever has to think about it and no second stylesheet repeats it
   (hard rule 54: the same selector in two files is a failure). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--sp-9);
}

/* The ink plate gets its elevation here rather than on a class, so that any
   dialog on any page floats without a page worker reaching for a shadow.
   This is the only box-shadow the token layer declares. */
[role="dialog"] {
  box-shadow: var(--shadow-2);
}

b,
strong {
  color: var(--ink);          /* components that sit on a dark surface MUST
                                 re-declare color — see .modal__copy in
                                 blocks.css; this rule loses that fight. */
  font-weight: var(--w-body-strong);
}

hr {
  height: 0;
  border: 0;
  border-top: var(--hair);
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

:focus-visible {
  outline: var(--rule-heavy-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  transition: outline-color var(--dur-1) var(--ease);
}

/* Motion primitives. Declared once, here, so that no page invents its own
   and no two files declare the same @keyframes name.
   RULE: a reveal may only animate a decorative layer. It may never gate the
   visibility of text, a table or a figure — those paint at full opacity with
   JavaScript disabled, blocked or failed. */
@keyframes orbexa-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes orbexa-sweep {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile step of the type scale (the "/" values in the design language) ─ */
@media (max-width: 900px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 26px;
    --fs-h3: 17px;
    --fs-lead: 17px;
    --fs-data: 14px;
    --section-y: 64px;
    --gutter: 24px;
    --sp-9: 64px;
    --sp-10: 80px;
  }
}

@media (max-width: 560px) {
  :root {
    --section-y: 48px;       /* the mobile floor — never below 48px          */
    --container-pad: 20px;   /* the edge floor — never below 16px            */
    --gutter: 20px;
  }
}