/*
 * Oxa design tokens.
 *
 * Mirrors theme.json so that components written in plain CSS can use the
 * same variables that Gutenberg uses on the editor side.
 */

:root {
  /* Color */
  --oxa-bg:         #ffffff;
  --oxa-surface:    #f7f7f8;
  --oxa-border:     #e6e6ea;
  --oxa-muted:      #6b7280;
  --oxa-text:       #0f1115;
  --oxa-primary:    #111111;
  --oxa-on-primary: #ffffff;
  --oxa-accent:     #3b82f6;

  /* Type scale */
  --oxa-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --oxa-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --oxa-fs-xs:  0.8125rem;
  --oxa-fs-sm:  0.9375rem;
  --oxa-fs-md:  1.0625rem;
  --oxa-fs-lg:  1.25rem;
  --oxa-fs-xl:  1.5rem;
  --oxa-fs-2xl: 2rem;
  --oxa-fs-3xl: clamp(2.25rem, 4vw, 3.25rem);
  --oxa-fs-4xl: clamp(2.75rem, 5vw, 4.5rem);

  /* Spacing scale */
  --oxa-space-1: 0.5rem;
  --oxa-space-2: 0.75rem;
  --oxa-space-3: 1rem;
  --oxa-space-4: 1.5rem;
  --oxa-space-5: 2.25rem;
  --oxa-space-6: 3.5rem;
  --oxa-space-7: 5rem;
  --oxa-space-8: 7rem;

  /* Layout */
  --oxa-content-width: 768px;
  --oxa-wide-width:    1200px;
  --oxa-radius:        10px;
  --oxa-radius-sm:     6px;
  --oxa-radius-lg:     16px;

  /* Motion */
  --oxa-ease: cubic-bezier(.2, .8, .2, 1);
  --oxa-dur:  180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-oxa-theme="light"]) {
    --oxa-bg:         #0b0c0f;
    --oxa-surface:    #14161b;
    --oxa-border:     #232730;
    --oxa-muted:      #9aa3af;
    --oxa-text:       #f1f3f5;
    --oxa-primary:    #f5f5f5;
    --oxa-on-primary: #0b0c0f;
    --oxa-accent:     #60a5fa;
  }
}