/* oddly design tokens. Build 52.0a.
 *
 * The single source of truth for the oddly design system: "the quiet
 * cockpit". Cream canvas, color discipline (teal is the only action
 * color, gold is the premium/money signal only), an editorial type
 * scale, generous 8px spacing.
 *
 * This file is the LOCKED token contract. Build 52.0b (component kit)
 * and the 52.1-52.5 re-skins consume these exact custom-property names.
 * Do not rename a token; add new ones if a need appears.
 *
 * Served at /_shared/oddly-tokens.css (pages_build_output_dir = src/app).
 * Loaded on every dashboard page by /dashboard/shared/chrome.js and
 * intended to be linked from marketing pages too.
 *
 * Typography note: the type-scale tokens (--oddly-text-display ...
 * --oddly-text-small) are CSS `font` shorthands, applied with
 *   font: var(--oddly-text-body);
 * Letter-spacing and text-transform cannot live in the `font`
 * shorthand, so display + label expose companion tokens
 * (--oddly-tracking-*). --oddly-text-mono is a font-FAMILY, applied with
 *   font-family: var(--oddly-text-mono);
 * Granular size-only tokens (--oddly-font-size-*) are also exposed for
 * consumers that set font-size directly.
 */

:root {
  /* ---- Color ---- */
  --oddly-canvas: #FAFAF7;          /* page background, app-wide */
  --oddly-surface: #FFFFFF;         /* card background */
  --oddly-surface-sunken: #F4F2EC;  /* inset / sunken areas */
  --oddly-border: #E8E6E0;          /* hairline borders */
  --oddly-border-strong: #D8D5CC;   /* emphasized borders */
  --oddly-ink: #1A1A2E;             /* primary text, deep navy */
  --oddly-ink-secondary: #5A5A6E;   /* secondary text */
  --oddly-ink-muted: #8A8A98;       /* hint / muted text */
  --oddly-teal: #2C7873;            /* primary action ONLY */
  --oddly-teal-hover: #246059;
  --oddly-teal-wash: #EAF1F0;       /* teal tint background */
  --oddly-gold: #B08D57;            /* premium / upgrade signal ONLY */
  --oddly-gold-wash: #F5EFE3;
  --oddly-success: #1D9E75;
  --oddly-success-wash: #E7F4EF;
  --oddly-warning: #C8861F;
  --oddly-warning-wash: #F6ECD9;
  --oddly-danger: #C0453F;
  --oddly-danger-wash: #F6E4E3;

  /* ---- Typography ---- */
  --oddly-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oddly-text-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* type-scale, applied with `font: var(--oddly-text-*)` */
  --oddly-text-display: 600 28px/1.2 var(--oddly-font-sans);  /* page titles */
  --oddly-text-title: 600 18px/1.3 var(--oddly-font-sans);    /* card + section titles */
  --oddly-text-label: 600 11px/1.4 var(--oddly-font-sans);    /* section labels, UPPERCASE via companion */
  --oddly-text-body: 400 14px/1.6 var(--oddly-font-sans);     /* body copy */
  --oddly-text-small: 400 12px/1.5 var(--oddly-font-sans);    /* fine print */

  /* size-only, for consumers that set font-size directly */
  --oddly-font-size-display: 28px;
  --oddly-font-size-title: 18px;
  --oddly-font-size-label: 11px;
  --oddly-font-size-body: 14px;
  --oddly-font-size-small: 12px;

  /* weights */
  --oddly-weight-regular: 400;
  --oddly-weight-medium: 500;
  --oddly-weight-semibold: 600;

  /* letter-spacing companions (not expressible in the font shorthand) */
  --oddly-tracking-display: -0.02em;
  --oddly-tracking-label: 0.08em;

  /* ---- Spacing (8px base) ---- */
  --oddly-space-1: 4px;
  --oddly-space-2: 8px;
  --oddly-space-3: 12px;
  --oddly-space-4: 16px;
  --oddly-space-5: 24px;
  --oddly-space-6: 32px;
  --oddly-space-7: 48px;
  --oddly-space-8: 64px;

  /* ---- Radius ---- */
  --oddly-radius-sm: 6px;
  --oddly-radius-md: 10px;   /* cards */
  --oddly-radius-lg: 16px;
  --oddly-radius-pill: 999px;

  /* ---- Shadow ---- */
  --oddly-shadow-card: 0 1px 2px rgba(26, 26, 46, 0.04);
  --oddly-shadow-pop: 0 8px 24px rgba(26, 26, 46, 0.10);

  /* ---- Motion ---- */
  --oddly-ease: cubic-bezier(0.2, 0, 0, 1);
  --oddly-duration: 160ms;
}