/*
 * Design tokens for the django-components docs site.
 *
 * All color values use OKLCH for perceptually uniform light/dark adjustment.
 * Hex equivalents in comments are approximate (for devtools sanity-checking).
 *
 * Spec: docs_site/design/DESIGN_spike_11.md section 10.
 */

/* ------------------------------------------------------------------ */
/* Self-hosted Inter variable font                                     */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}

/* ------------------------------------------------------------------ */
/* Typography tokens                                                   */
/* ------------------------------------------------------------------ */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
}

/* ------------------------------------------------------------------ */
/* Light theme (default)                                               */
/* ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Surfaces - pulled away from pure white for softer feel */
  --c-bg:        oklch(96.5% 0.005 250);  /* ~#f2f4f7 warm off-white */
  --c-surface:   oklch(94.5% 0.006 250);  /* ~#ebeef3 */
  --c-surface-2: oklch(92% 0.007 250);    /* ~#e2e6ed */
  --c-surface-3: oklch(89% 0.008 250);    /* ~#d6dbe4 */

  /* Foreground & borders - pulled away from pure black for softer feel */
  --c-fg:            oklch(25% 0.01 250);  /* ~#2a2d3d soft black */
  --c-fg-muted:      oklch(40% 0.01 250);  /* #525b6e */
  --c-fg-subtle:     oklch(50% 0.01 250);  /* darkened from 55% for WCAG AA (~5.4:1 on --c-bg) */
  --c-border:        oklch(88% 0.005 250); /* #d0d5db */
  --c-border-subtle: oklch(92% 0.005 250); /* #dde2e7 */

  /* Accent: muted teal */
  --c-accent:       oklch(55% 0.13 195);        /* #0d8a8a */
  --c-accent-hover: oklch(48% 0.13 195);        /* #0a7474 */
  --c-accent-dim:   oklch(55% 0.13 195 / 10%);
  /* Inline-code text: a darker teal than --c-accent so it meets WCAG AA on the
     --c-accent-dim pill (the brand teal itself is only ~3.4:1 there). */
  --c-code-text:    oklch(46% 0.13 195);

  /* Links: steel-blue (darkened from 55% to 52% L for WCAG AA, ~4.9:1 on bg) */
  --c-link:       oklch(52% 0.15 245);
  --c-link-hover: oklch(48% 0.15 245);        /* #2a5da8 */
  --c-link-dim:   oklch(55% 0.15 245 / 10%);

  /* Admonition semantics */
  --c-note:    oklch(55% 0.15 245);  /* blue, same hue as link */
  --c-info:    oklch(55% 0.13 175);  /* teal-cyan */
  --c-warning: oklch(65% 0.16 70);   /* amber */
  --c-danger:  oklch(55% 0.18 25);   /* red, reserved */

  /* Shadows */
  --shadow-modal:      0 25px 50px -12px oklch(0% 0 0 / 25%);
  --shadow-card-hover: 0 4px 12px oklch(0% 0 0 / 8%);
}

/* ------------------------------------------------------------------ */
/* Dark theme                                                          */
/* ------------------------------------------------------------------ */
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:        oklch(18% 0.008 250);   /* ~#151825 soft dark */
  --c-surface:   oklch(21% 0.01 250);    /* ~#1c1f2b */
  --c-surface-2: oklch(24% 0.01 250);    /* ~#222536 */
  --c-surface-3: oklch(28% 0.01 250);    /* ~#2a2e42 */

  --c-fg:            oklch(90% 0.006 80);  /* ~#e5e0d4 soft off-white */
  --c-fg-muted:      oklch(70% 0.008 80);  /* #b3aa9a */
  --c-fg-subtle:     oklch(50% 0.008 80);  /* #7a7264 */
  --c-border:        oklch(32% 0.01 250);  /* #2d3043 */
  --c-border-subtle: oklch(28% 0.01 250);  /* #272a3b */

  --c-accent:       oklch(72% 0.13 195);        /* #3eb4b4 */
  --c-accent-hover: oklch(78% 0.13 195);        /* #5cc8c8 */
  --c-accent-dim:   oklch(72% 0.13 195 / 12%);
  --c-code-text:    oklch(72% 0.13 195);        /* bright teal already passes on the dark tint */

  --c-link:       oklch(72% 0.13 245);        /* #7aaae0 */
  --c-link-hover: oklch(78% 0.13 245);        /* #94c0eb */
  --c-link-dim:   oklch(72% 0.13 245 / 12%);

  --c-note:    oklch(72% 0.13 245);
  --c-info:    oklch(72% 0.13 175);
  --c-warning: oklch(75% 0.14 70);
  --c-danger:  oklch(65% 0.16 25);

  --shadow-modal:      0 25px 50px -12px oklch(0% 0 0 / 50%);
  --shadow-card-hover: 0 4px 12px oklch(0% 0 0 / 20%);
}

/* Auto dark theme: respects OS preference when no explicit choice is stored */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg:        oklch(18% 0.008 250);
    --c-surface:   oklch(21% 0.01 250);
    --c-surface-2: oklch(24% 0.01 250);
    --c-surface-3: oklch(28% 0.01 250);

    --c-fg:            oklch(90% 0.006 80);
    --c-fg-muted:      oklch(70% 0.008 80);
    --c-fg-subtle:     oklch(50% 0.008 80);
    --c-border:        oklch(32% 0.01 250);
    --c-border-subtle: oklch(28% 0.01 250);

    --c-accent:       oklch(72% 0.13 195);
    --c-accent-hover: oklch(78% 0.13 195);
    --c-accent-dim:   oklch(72% 0.13 195 / 12%);
    --c-code-text:    oklch(72% 0.13 195);

    --c-link:       oklch(72% 0.13 245);
    --c-link-hover: oklch(78% 0.13 245);
    --c-link-dim:   oklch(72% 0.13 245 / 12%);

    --c-note:    oklch(72% 0.13 245);
    --c-info:    oklch(72% 0.13 175);
    --c-warning: oklch(75% 0.14 70);
    --c-danger:  oklch(65% 0.16 25);

    --shadow-modal:      0 25px 50px -12px oklch(0% 0 0 / 50%);
    --shadow-card-hover: 0 4px 12px oklch(0% 0 0 / 20%);
  }
}