/**
 * Gachi design tokens for the web, from the Lite brand guidelines 1.1
 * (colour, type scale, spacing). Nothing else in the landing page types a
 * raw colour, font size or spacing value.
 *
 * Dark is primary (bare :root). Light is the companion mode. The guidelines'
 * light surface is pure white; CLAUDE.md never allows pure white, so that one
 * surface is a soft off-white here.
 */

:root {
  color-scheme: dark;

  /* Dark foundations */
  --night: #07070b;
  --night-glow: #140e29;
  --night-surface: #13111c;
  --night-elevated: #1f1b2e;
  --night-text: #f7f4ff;
  --night-muted: #9e96b0;

  /* Light foundations */
  --day: #f8f7ff;
  --day-glow: #e8e0ff;
  --day-surface: #fcfbff;
  --day-elevated: #f2edff;
  --day-text: #171321;
  --day-muted: #706b82;

  /* Accents. Purple signals interaction and progress. */
  --purple: #7d4fff;
  --lavender: #b094ff;
  --blue: #7aa8ff;
  --pink: #f092b8;
  --muted-rose: #d98fa4; /* errors; nothing is ever red */

  /* Roles (dark) */
  --background: var(--night);
  --glow: var(--night-glow);
  --surface: var(--night-surface);
  --elevated: var(--night-elevated);
  --text: var(--night-text);
  --text-secondary: var(--night-muted);
  --text-tertiary: rgba(158, 150, 176, 0.72);
  --border: rgba(247, 244, 255, 0.08);
  --accent: var(--purple);
  --on-accent: var(--night-text);
  --eyebrow: var(--lavender);
  --danger: var(--muted-rose);
  --nav-glass: rgba(7, 7, 11, 0.72);
  /* Character art and the white wordmark always sit on night. In dark mode
     the page is already night, so their holding shapes are invisible. */
  --art-holder: transparent;
  --logo-holder: transparent;

  /* Type: DynaPuff for the headline (a deliberate departure from the
     guidelines, chosen by the user); Inter for everything else. The
     wordmark is artwork. */
  --font-display: "DynaPuff", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display: clamp(36px, 6.4vw, 56px);
  --type-section: clamp(30px, 4.8vw, 44px);
  --type-title: clamp(20px, 2.4vw, 28px);
  --type-timer: clamp(64px, 12vw, 112px);
  --type-lede: clamp(17px, 1.8vw, 20px);
  --type-body: 16px;
  --type-caption: 14px;
  --type-label: 12px;

  /* Spacing, 8px grid. Guidelines: 24px screen margins, 16px card gaps. */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section: clamp(96px, 14vw, 168px);
  --space-hero-top: clamp(48px, 9vw, 112px);
  --card-padding: 20px;
  --card-gap: 16px;
  --screen-margin: 24px;
  --tap: 44px;

  /* Radius */
  --radius-card: 20px;
  --radius-sheet: 28px;
  --radius-pill: 100px;

  /* Motion: slow and eased, nothing bounces. */
  --motion-fast: 400ms;
  --motion-base: 500ms;
  --motion-slow: 600ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --float: 7s;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: var(--day);
    --glow: var(--day-glow);
    --surface: var(--day-surface);
    --elevated: var(--day-elevated);
    --text: var(--day-text);
    --text-secondary: var(--day-muted);
    --text-tertiary: rgba(112, 107, 130, 0.8);
    --border: rgba(23, 19, 33, 0.08);
    --eyebrow: var(--purple);
    --nav-glass: rgba(248, 247, 255, 0.76);
    --art-holder: var(--night);
    --logo-holder: var(--night-surface);
  }
}