/*
  AnYauPo design tokens.
  Source of truth: docs/superpowers/specs/2026-10-27-anyaupo-design-system.md
  Approved 2026-10-27. Values here are decided; change them only with the owner.
  Light is the default; dark follows the system setting (no manual toggle).
*/

:root {
  color-scheme: light dark;

  /* Brand palette: the three logo colors plus the two grounds */
  --ink: #1d2230;     /* the roof: structure */
  --gold: #c9952f;    /* the crescent: warmth, the action */
  --icy: #6f9ec7;     /* the sparkle: light, attention */
  --cream: #faf7f1;
  --night: #14161c;
  --pale: #f4efe6;

  /* Semantic colors, light */
  --bg: var(--cream);
  --surface: #f3eee3;
  --line: #e0d8c7;            /* decorative dividers and card edges only */
  --field-border: #80858f;    /* form-field edges: 3:1 against the page */
  --text: var(--ink);
  --muted: #575d6b;
  --link: var(--ink);         /* links are ink with a gold underline */
  --primary: var(--ink);
  --on-primary: var(--cream);
  --primary-hover: #2c3550;
  --secondary-hover: #efe9db;
  --accent: var(--gold);
  --on-accent: var(--ink);
  --accent-hover: #d6a23e;
  --focus: #4f86b8;
  --error: #c43a2f;
  --success: #2f7d5b;
  --bar: var(--ink);
  --on-bar: var(--pale);
  --roof: var(--ink);         /* roof stroke of the inline mark */

  /* The hero banner is dark in both modes */
  --banner-bg: linear-gradient(135deg, #2a2f3a 0%, #14161c 62%, #3a2f22 100%);
  --banner-text: var(--pale);
  --banner-muted: #cfc9bb;

  /* Shape: pill buttons, soft fields and cards */
  --radius-pill: 999px;
  --radius-field: 10px;
  --radius-card: 14px;
  --radius-banner: 12px;
  --radius-small: 8px;

  /* Space (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;
  --tap: 44px;                /* minimum height of anything pressable */
  --measure: 62ch;            /* longest comfortable line of body text */

  /* Type */
  --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-han: 'Noto Serif SC', 'Songti SC', 'Noto Serif CJK SC', serif;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-h3: 1.375rem;
  --text-h2: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
  --text-h1: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --text-label: 0.75rem;      /* uppercase labels, letter-spacing 0.16em */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--night);
    --surface: #1b1e26;
    --line: #2c303b;
    --field-border: #6b6f7a;
    --text: var(--pale);
    --muted: #a9a498;
    --link: var(--pale);
    --primary: var(--pale);
    --on-primary: var(--night);
    --primary-hover: #ffffff;
    --secondary-hover: #252a35;
    --accent: var(--gold);
    --on-accent: var(--night);
    --accent-hover: #d6a23e;
    --focus: var(--icy);
    --error: #e8776d;
    --success: #6fc59c;
    --bar: #1b1e26;
    --on-bar: var(--pale);
    --roof: var(--pale);
  }
}