/* ── Ogleby color system ───────────────────────────────────────────
   High-contrast black/white base, electric-yellow primary accent,
   cobalt-blue secondary accent. Punchy, not corporate. */
:root {
  /* Base palette (raw brand values — do not round) */
  --og-white: #F8F8FF;   /* ghost white — the light ground */
  --og-black: #121212;   /* near-black — the dark ground */
  --og-yellow: #EAEF1B;  /* electric yellow — primary accent */
  --og-blue: #0846C1;    /* cobalt blue — secondary accent */

  /* Neutral ramp derived between black and white for UI surfaces */
  --og-ink-900: #121212;
  --og-ink-800: #1e1e1e;
  --og-ink-700: #2b2b2b;
  --og-ink-600: #4a4a4a;
  --og-ink-500: #6f6f6f;
  --og-ink-400: #9a9a9a;
  --og-ink-300: #c4c4c6;
  --og-ink-200: #e2e2e6;
  --og-ink-100: #efeff3;
  --og-ink-050: #f8f8ff;

  /* Accent shades (yellow + blue variants for states) */
  --og-yellow-bright: #EAEF1B;
  --og-yellow-deep: #cdd200;   /* pressed / hover-darker yellow */
  --og-yellow-soft: #f4f79a;   /* tint for washes */
  --og-blue-bright: #0846C1;
  --og-blue-deep: #063291;     /* pressed / hover-darker blue */
  --og-blue-soft: #b9c9ef;     /* tint for washes */

  /* Semantic status (kept minimal + on-brand) */
  --og-success: #1f8a3b;
  --og-warning: #EAEF1B;
  --og-danger: #d92d20;

  /* ── Semantic aliases (light ground — default) ── */
  --surface-page: var(--og-white);
  --surface-card: #ffffff;
  --surface-sunken: var(--og-ink-100);
  --surface-inverse: var(--og-black);

  --text-primary: var(--og-black);
  --text-secondary: var(--og-ink-600);
  --text-muted: var(--og-ink-500);
  --text-on-accent: var(--og-black);       /* yellow is light → black text */
  --text-on-blue: var(--og-white);
  --text-inverse: var(--og-white);

  --border-default: var(--og-black);
  --border-subtle: var(--og-ink-200);
  --border-strong: var(--og-black);

  --accent-primary: var(--og-yellow);
  --accent-secondary: var(--og-blue);
  --focus-ring: var(--og-blue);
}

/* ── Dark ground scope — the black canvas the brand loves ── */
.og-dark,
[data-theme="dark"] {
  --surface-page: var(--og-black);
  --surface-card: var(--og-ink-800);
  --surface-sunken: var(--og-ink-900);
  --surface-inverse: var(--og-white);

  --text-primary: var(--og-white);
  --text-secondary: var(--og-ink-300);
  --text-muted: var(--og-ink-400);
  --text-inverse: var(--og-black);

  --border-default: var(--og-white);
  --border-subtle: var(--og-ink-700);
  --border-strong: var(--og-white);

  --focus-ring: var(--og-yellow);
}