/*
 * OFRA design tokens — vendored for a non-Vue tool.
 *
 * Source of truth: github.com/OFRA-ORG/ofra-ui, packages/tokens/src/theme.css
 * (commit 17ed7ce). That file is a Tailwind v4 `@theme` block; this copy
 * re-scopes the same variables to `:root` for plain-CSS consumers, per the
 * ofra-ui README ("for a non-Vue tool you can still reuse @ofra/tokens").
 * Re-sync values from the source when the tokens package is bumped —
 * do not edit values here.
 */
:root {
  /* ---- Brand navy (primary) ---- */
  --color-navy-50: #eceef4;
  --color-navy-100: #cfd4e6;
  --color-navy-200: #9fa9c9;
  --color-navy-300: #6f7da8;
  --color-navy-400: #45527e;
  --color-navy-500: #2a3760;
  --color-navy-600: #1f2a4d;
  --color-navy-700: #1a2342;
  --color-navy-800: #16213c;
  --color-navy-900: #142147; /* OFRA brand navy */
  --color-navy-950: #0c1230;

  /* ---- Secondary blue (headings / links) ---- */
  --color-blue-50: #eef4fb;
  --color-blue-100: #d4e3f4;
  --color-blue-200: #a9c6e8;
  --color-blue-300: #7aa6d6;
  --color-blue-400: #4f81bd;
  --color-blue-500: #365f91;
  --color-blue-600: #29507f;
  --color-blue-700: #17365d;
  --color-blue-800: #122c4d;
  --color-blue-900: #0e2240;

  --color-navy-light: #1e3268;

  /* ---- Accent red ---- */
  --color-red-deep: #8a0014;
  --color-red-50: #fdeaec;
  --color-red-100: #f9c5cb;
  --color-red-200: #f08d98;
  --color-red-300: #e6505f;
  --color-red-400: #d42234;
  --color-red-500: #bb001a; /* OFRA brand red */
  --color-red-600: #a30017;
  --color-red-700: #850013;
  --color-red-800: #66000f;
  --color-red-900: #4d000b;

  /* ---- Neutral gray ---- */
  --color-gray-50: #f7f7f8;
  --color-gray-100: #ededee;
  --color-gray-200: #d9dadc;
  --color-gray-300: #bcbfc2;
  --color-gray-400: #95989d;
  --color-gray-500: #888888;
  --color-gray-600: #6b6e72;
  --color-gray-700: #4f5256;
  --color-gray-800: #36383b;
  --color-gray-900: #1f2123;

  /* ---- Semantic aliases ---- */
  --color-brand: var(--color-navy-900);
  --color-brand-accent: var(--color-red-500);
  --color-background: #ffffff;
  --color-surface: var(--color-gray-50);
  --color-canvas: #eef0f4;
  --color-surface-hover: #e7eaf0;
  --color-surface-sunken: #e2e6ee;
  --color-selected: var(--color-blue-50);
  --color-selected-border: var(--color-blue-300);
  --color-foreground: var(--color-gray-900);
  --color-muted: var(--color-gray-500);
  --color-border: var(--color-gray-200);
  --color-ring: var(--color-blue-400);
  --color-success: #1f7a3d;
  --color-warning: #b7791f;
  --color-danger: var(--color-red-500);
  --color-info: var(--color-blue-500);
  --color-primary-hover: var(--color-navy-600);
  --color-primary-active: var(--color-navy-950);

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgb(20 33 71 / 0.06), 0 4px 12px rgb(20 33 71 / 0.07);
  --shadow-card-lg: 0 2px 8px rgb(20 33 71 / 0.08), 0 16px 32px rgb(20 33 71 / 0.12);

  /* ---- Typography ---- */
  --font-heading: "Montserrat Variable", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Courier New", monospace;

  /* ---- Type scale ---- */
  --text-h4: 1.125rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;

  /* ---- Radius ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}