/* Olocus design tokens — locked Beacon identity (docs/STYLE-GUIDE.md v1.0).
 *
 * Every component CSS file must reference these via var(--token-name).
 * Raw hex / rgb / hsl / named colours, raw px values for spacing or type,
 * and bespoke transition timings are all forbidden in component CSS by
 * the style-guide doctrine in §0 (Operating discipline).
 *
 * Provenance: locked 2026-05-27 during Rock 1 (Branding lockdown) per
 * docs/MVP-ROADMAP.md. The brand-source artifacts live in
 * docs/brand-identity/. The legacy site/styles/tokens.css mirror was
 * retired with the rest of site/ when the hostname collapse was fully
 * realised; the static co-pages bundled at dist root
 * (crates/olocus-app/{about,contact,legal,pricing}.html) inline a
 * minimal token block per page rather than depending on this file.
 */

/* ───────────────────────────────────────────────────────────────────────
 * Self-hosted typography
 * Source: latin-subset woff2 from gwfh.mranftl.com (SIL OFL 1.1).
 * Notices in crates/olocus-app/assets/fonts/LICENSE.txt.
 * ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geist-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
  /* ─── Beacon palette ─────────────────────────────────────────────── */
  --cloud:         #FAFAF5;
  --paper:         #FFFFFF;
  --mist:          #EDE9DD;
  --ink:           #14171C;
  --muted:         #6E7280;
  --border:        rgba(20, 23, 28, 0.10);
  --border-strong: rgba(20, 23, 28, 0.22);
  --accent:        #FF5A3D;  /* coral — the signature accent */
  --accent-2:      #FFC53A;  /* butter — secondary accent */
  --accent-ink:    #2B0E08;  /* legible text colour on coral */

  /* Semantic-purpose colours (status only — never brand). */
  --red-500:   #DC2626;
  --amber-500: #D97706;
  --blue-500:  #2563EB;

  /* ─── Typography ─────────────────────────────────────────────────── */
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  /* ─── Radii ──────────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 9999px;

  /* ─── Motion — purposeful, fast ──────────────────────────────────── */
  --duration-fast:    100ms;  /* hover, focus */
  --duration-default: 180ms;  /* press, toggle, panel open */
  --duration-medium:  320ms;  /* reveal, modal */
  --duration-slow:    500ms;  /* the locus pulse on issue */
  --duration-breath:  2200ms; /* validity-near-expiry pulse loop */

  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:      cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1.0);

  /* ─── Semantic aliases — light mode ──────────────────────────────── */
  --color-bg-page:          var(--cloud);
  --color-bg-surface:       var(--paper);
  --color-bg-elevated:      var(--mist);
  --color-bg-overlay:       var(--mist);
  --color-border-primary:   var(--border);
  --color-border-secondary: var(--border);
  --color-text-heading:     var(--ink);
  --color-text-body:        var(--ink);
  --color-text-muted:       var(--muted);
  --color-text-on-primary:  var(--accent-ink);
  --color-primary-bg:       var(--accent);
  --color-primary-hover:    var(--accent);
  --color-primary-active:   var(--accent);
  --color-primary-accent:   var(--accent);
  /* --color-primary-text is the *text* form of the brand colour. Beacon's
   * body-text register is ink; coral is the accent, never a body-text
   * colour. Consumers that want the coral accent for a dot / fill /
   * outline should use `--color-primary-accent`. */
  --color-primary-text:     var(--ink);

  /* Proof-surface semantic aliases (the proof artefact sits on `paper`
   * inside the `cloud` page; the brand applied — see ProofCard in the
   * brand-identity bundle). */
  --color-bg-proof:              var(--paper);
  --color-bg-proof-inset:        var(--mist);
  --color-border-proof:          var(--border);
  --color-accent-bounded:        var(--accent);
  --color-accent-bounded-subtle: var(--mist);
  --color-text-bounded:          var(--ink);

}

@media (prefers-color-scheme: dark) {
  :root {
    --cloud:         #0E1014;
    --paper:         #15181E;
    --mist:          #1B1F26;
    --ink:           #F0F2F5;
    --muted:         #8D919B;
    --border:        rgba(240, 242, 245, 0.10);
    --border-strong: rgba(240, 242, 245, 0.22);
    --accent:        #FF7A60;
    --accent-2:      #FFD75A;
    --accent-ink:    #1A0905;

    /* Semantic aliases re-derive from the dark-mode primitives above —
     * the var() chain inside `:root` resolves to the dark values. */
  }
}

/* ───────────────────────────────────────────────────────────────────────
 * Surface grain — applied to `cloud` backgrounds where the brand wants
 * the surface to read as paper rather than UI. Per STYLE-GUIDE §9.
 * Dark mode drops the grain.
 * ─────────────────────────────────────────────────────────────────── */
.surface-grain {
  background-color: var(--color-bg-page);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

@media (prefers-color-scheme: dark) {
  .surface-grain {
    background-image: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────
 * Forced Colors Mode — preserve meaning under user-controlled palettes.
 * The Beacon mark inherits the user's text colour for the ring; the
 * focus ring inherits the Highlight system colour.
 * ─────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .beacon-mark,
  .beacon-ring {
    stroke: CanvasText;
  }
  :focus-visible {
    outline-color: Highlight;
  }
}