/* ============================================================
   OpsCodex — design tokens (Studio design system, v0.2)
   Trimmed for the marketing site: token variables only.
   Fonts are self-hosted (see fonts/fonts.css) — no CDN import.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLOR · Surfaces
     ---------------------------------------------------------- */
  --ops-canvas:            #FAF8F5;   /* Page background. Warm cream. */
  --ops-canvas-deep:       #F4F0E8;   /* Static wells / deep bands. */
  --ops-surface:           #FFFFFF;   /* Elevated cards on canvas. */
  --ops-surface-tint:      #FBF9F5;   /* Hovered card. Barely there. */

  /* ----------------------------------------------------------
     COLOR · Accent (Forest Green)
     Brand role only. Never reused as generic tinted surface.
     ---------------------------------------------------------- */
  --ops-accent:            #2A5C45;   /* Primary. Buttons, active nav, links. */
  --ops-accent-hover:      #234F3A;   /* Hover — ~10% darker. */
  --ops-accent-press:      #1A3D2D;   /* Press — ~20% darker. */
  --ops-accent-ink:        #142D20;   /* Forest used as text on soft bg / dark band. */

  /* ----------------------------------------------------------
     COLOR · Neutral warm tints
     ---------------------------------------------------------- */
  --ops-tint-warm:         #F2EDE3;   /* Neutral tag bg. */
  --ops-tint-warm-strong:  #ECE6D8;   /* Interactive hover surfaces. */

  /* Approved-only forest tint. NOT a generic surface. */
  --ops-approved-soft:     #DAE7DE;

  /* ----------------------------------------------------------
     COLOR · Text
     ---------------------------------------------------------- */
  --ops-ink:               #1B1A17;   /* Primary text. Warm near-black. */
  --ops-ink-2:             #4A463F;   /* Secondary text. */
  --ops-ink-3:             #6F685E;   /* Tertiary — 4.91:1 on canvas (WCAG AA). */
  --ops-ink-4:             #B6AE9F;   /* Disabled-state; WCAG-exempt. */

  /* ----------------------------------------------------------
     COLOR · Borders
     ---------------------------------------------------------- */
  --ops-border:            #E8E2D8;   /* Card hairline. */
  --ops-border-strong:     #D6CEC0;   /* Emphasized borders. */
  --ops-border-input:      #9B8F77;   /* Input/ghost-button borders — 3:1 verified. */
  --ops-border-focus:      #2A5C45;   /* = accent. */

  /* ----------------------------------------------------------
     TYPE · Families (self-hosted, see fonts/fonts.css)
     ---------------------------------------------------------- */
  --ops-font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --ops-font-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --ops-font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ----------------------------------------------------------
     RADIUS, BORDERS, MOTION
     ---------------------------------------------------------- */
  --ops-radius-sm:   4px;
  --ops-radius-md:   8px;
  --ops-radius-lg:   12px;
  --ops-radius-pill: 999px;

  --ops-hairline:        1px solid var(--ops-border);
  --ops-hairline-strong: 1px solid var(--ops-border-strong);

  --ops-ease:        cubic-bezier(.2, 0, .2, 1);
  --ops-dur-fast:    120ms;
  --ops-dur-base:    180ms;
}