/* Open Design System · v1.0 (Jul 2026) — generated from open-tokens.json
   Binding source of truth. Do not invent colors, fonts, radii, spacing or component styles. */

/* ── Primitive tokens ─────────────────────────────────────── */
:root {
  --red-500: #E10600;  --red-100: #FBE7E3;
  --blue-700: #4F7180; --blue-600: #AABBC5; --blue-500: #B7C5CD; --blue-200: #DCE3E7; --blue-100: #E9EDEF;
  --apricot-600: #E6BD92; --apricot-400: #E3CEC8; --apricot-200: #F3E9E6;
  --ink-900: #232323; --paper-100: #F7F6F3; --paper-000: #FCFBF8; --white: #FFFFFF;

  /* Clinical — functional, not brand; icon + word, never color alone */
  --clinical-critical: #B50500;
  --clinical-warning-accent: #A96A1C;   /* icons, backgrounds */
  --clinical-warning-text: #9B5A16;     /* small text needs this or Ink */
  --clinical-stable: #46705C;

  /* Geometry — locked */
  --hairline: 1px solid rgba(35,35,35,.22); /* @kind other */   /* never 0.75px in production */
  --hairline-strong: 1px solid rgba(35,35,35,.35); /* @kind other */
  --radius-shell: 16px;
  --radius-module: 14px;
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-pill: 999px;  /* filters, tags, segmented choices, marketing CTAs, OA primary CTA ONLY */
  /* Spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 (no 40) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Type — production rule. No substitutions. */
  --font-display: 'Archivo', sans-serif;        /* weight 300, large statements only */
  --font-ui: 'Schibsted Grotesk', sans-serif;   /* everything else */
  --font-data: 'Spline Sans Mono', monospace;   /* lab values, units, aligned data only */

  /* Motion */
  --motion-micro: 150ms; /* @kind other */
  --motion-standard: 230ms; /* @kind other */
  --motion-large: 380ms; /* @kind other */
  --motion-ease: cubic-bezier(.2,.8,.2,1); /* @kind other */
}

/* ── Semantic tokens (default = shared/neutral) ───────────── */
:root {
  --color-text-primary: var(--ink-900);
  --color-text-secondary: rgba(35,35,35,.65);
  --color-canvas: var(--paper-100);
  --color-surface: var(--paper-100);
  --color-surface-raised: var(--paper-000);
  --color-border-default: rgba(35,35,35,.22);
  --color-border-strong: rgba(35,35,35,.35);
  --color-action-primary: var(--ink-900);
  --color-action-primary-hover: #000000;
  --color-action-secondary: transparent;
  --color-focus: var(--blue-700);
  --color-brand-symbol: var(--ink-900);
  --color-atmosphere-top: var(--paper-100);
  --color-atmosphere-middle: var(--paper-100);
  --color-atmosphere-bottom: var(--paper-100);
}

/* ── Brand assignment ─────────────────────────────────────── */
[data-brand="openvet"] {
  --color-brand-symbol: var(--blue-700);
  --color-action-primary: var(--ink-900);
  --color-action-primary-hover: #000000;
  --color-atmosphere-top: var(--blue-100);
  --color-atmosphere-middle: var(--blue-200);
  --color-atmosphere-bottom: #CFD9DE;
  --control-height: 36px;
  --control-radius: var(--radius-control);   /* rounded rectangle, NOT pill */
  --gap-interior: 8px;
  --body-size: 13px; --body-line: 19px;
  --button-size: 13px;   /* typography.openvet.button */
}
[data-brand="openanimal"] {
  --color-brand-symbol: var(--red-500);
  --color-action-primary: var(--red-500);
  --color-action-primary-hover: #C00500;
  --color-atmosphere-top: var(--apricot-200);
  --color-atmosphere-middle: var(--apricot-400);
  --color-atmosphere-bottom: var(--apricot-600);
  --control-height: 44px;
  --control-radius: var(--radius-pill);      /* primary CTA may be a pill */
  --gap-interior: 12px;
  --body-size: 15px; --body-line: 23px;
  --button-size: 14px;   /* typography.openanimal.button */
}

/* Red inside OpenVet is legal ONLY for: owner/OpenAnimal-originated information,
   genuinely critical clinical states, and co-branded moments.
   The company is unified by marks, grammar and the Lifeline — not one shared primary. */