/* ==========================================================================
   Signal8 Games — Design System (base.css)
   ==========================================================================
   Three-layer CSS custom property architecture:
     Layer 1: Literal brand palette (immutable brand colors)
     Layer 2: Semantic dark tokens (default appearance per D-07)
     Layer 3: Light mode override (via prefers-color-scheme per D-08)

   Decisions referenced:
     D-01: Layered token architecture
     D-02: Semantic role mapping (cyan=primary, indigo=secondary, orchid=accent)
     D-03: Full state tokens (hover, focus, disabled)
     D-04: Nizzoli Rd self-hosted, woff2, two weights (400, 700)
     D-05: Nizzoli Rd headings only, system fonts for body
     D-07: Dark mode is default
     D-08: Light mode alternative via prefers-color-scheme
     D-11: Root-relative paths for all font URLs
   ========================================================================== */


/* ==========================================================================
   Section 2: Literal Brand Palette — Layer 1 (D-01)
   --------------------------------------------------------------------------
   These are the immutable brand colors from the Signal8 Games brand guide.
   NEVER use these directly in components — always reference semantic tokens.
   Accessible variants lighten indigo/orchid to pass WCAG AA (4.5:1) on navy.
   ========================================================================== */

:root {
  /* Brand palette — immutable values from brand guidelines */
  --brand-cyan: #46C4E2;
  --brand-indigo: #6067AE;
  --brand-orchid: #855FA7;
  --brand-navy: #0F172A;
  --brand-white: #FFFFFF;

  /* Accessible variants — lightened to meet WCAG AA 4.5:1 on navy (D-01) */
  --brand-indigo-accessible: #7B83C0;  /* 4.97:1 on navy */
  --brand-orchid-accessible: #A680C8;  /* ~5.0:1 on navy */

  /* ==========================================================================
     Section 3: Semantic Dark Tokens — Layer 2 (D-02, D-03, D-07)
     --------------------------------------------------------------------------
     Dark mode is the DEFAULT appearance (D-07).
     Semantic tokens map brand colors to functional roles:
       - Primary (Cyan): buttons, links, highlights
       - Secondary (Indigo): secondary buttons, less prominent interactions
       - Accent (Orchid): decorative highlights, badges
     State tokens (D-03): hover, focus, disabled for each role.
     ========================================================================== */

  /* Surfaces */
  --color-bg: var(--brand-navy);
  --color-surface: #1E293B;
  --color-text: var(--brand-white);
  --color-text-muted: #94A3B8;

  /* Primary — Cyan (D-02) */
  --color-primary: var(--brand-cyan);
  --color-primary-hover: #5ED0EC;
  --color-primary-focus: #3AB8D6;
  --color-primary-disabled: #46C4E266;

  /* Secondary — Indigo (D-02, uses accessible variant for text) */
  --color-secondary: var(--brand-indigo-accessible);
  --color-secondary-hover: #8B93D0;
  --color-secondary-focus: #6D75B8;
  --color-secondary-disabled: #6067AE66;

  /* Accent — Orchid (D-02, uses accessible variant for text) */
  --color-accent: var(--brand-orchid-accessible);
  --color-accent-hover: #A580C8;
  --color-accent-focus: #8F6AB2;
  --color-accent-disabled: #855FA766;

  /* ==========================================================================
     Section 5: Typography Scale (D-05)
     --------------------------------------------------------------------------
     Fluid type scale using clamp() — no breakpoint jumps.
     Min viewport: 320px, Max viewport: 1200px.
     Nizzoli Rd for headings, system font stack for body (D-05).
     ========================================================================== */

  --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);        /* 16px — 18px */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);            /* 18px — 20px */
  --text-h4: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);           /* 20px — 24px */
  --text-h3: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);             /* 24px — 32px */
  --text-h2: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);         /* 30px — 40px */
  --text-h1: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);           /* 36px — 56px */
}

/* ==========================================================================
   Section 4: Light Mode Override — Layer 3 (D-08)
   --------------------------------------------------------------------------
   Activates when OS/browser preference is light.
   Swaps semantic token values — components reference the same token names.
   Cyan darkened to #0E7490 for AA compliance on white background.
   ========================================================================== */

@media (prefers-color-scheme: light) {
  :root {
    /* Surfaces */
    --color-bg: var(--brand-white);
    --color-surface: #F1F5F9;
    --color-text: var(--brand-navy);
    --color-text-muted: #475569;

    /* Primary — darkened cyan for AA on white */
    --color-primary: #0E7490;
    --color-primary-hover: #0C6580;
    --color-primary-focus: #0A5670;
    --color-primary-disabled: #0E749066;

    /* Secondary — raw brand indigo passes AA on white */
    --color-secondary: var(--brand-indigo);
    --color-secondary-hover: #4F56A0;
    --color-secondary-focus: #3E4590;
    --color-secondary-disabled: #6067AE66;

    /* Accent — raw brand orchid passes AA on white */
    --color-accent: var(--brand-orchid);
    --color-accent-hover: #704F97;
    --color-accent-focus: #5B3F87;
    --color-accent-disabled: #855FA766;
  }
}

/* ==========================================================================
   Section 6: Minimal Reset
   --------------------------------------------------------------------------
   Per CLAUDE.md: "No CSS resets beyond a minimal box-sizing reset."
   Uses 100svh for iOS Safari safe area fix.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Section 7: Typography Rules (D-05)
   --------------------------------------------------------------------------
   Headings use Nizzoli Rd (brand font) at fluid sizes.
   Body text inherits system font stack from body element.
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

/* ==========================================================================
   Section 8: Reduced Motion (Accessibility)
   --------------------------------------------------------------------------
   Respects user preference for reduced motion.
   Per CLAUDE.md section 8: "Wrap all animations and transitions in
   @media (prefers-reduced-motion: reduce)."
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Section 9: Utility Classes — Accessibility
   --------------------------------------------------------------------------
   Skip link: visually hidden until focused, for keyboard navigation.
   Per CLAUDE.md section 8: "Add a skip-to-main-content link as the first
   element in <body>."
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--brand-navy);
  padding: 8px 16px;
  z-index: 100;
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link {
    transition: top 0.2s;
  }
}

.skip-link:focus {
  top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}