/* ===========================================================================
 * Regio Clarity — Design Tokens
 * ---------------------------------------------------------------------------
 * Light mode: "Editorial Clarity & Tonal Warmth"
 * Dark mode:  "The Cinematic Transcript"
 * Source: stitch/regio_clarity/DESIGN.md + stitch/regio_clarity_night/DESIGN.md
 * =========================================================================*/

:root {
  /* Brand */
  --primary: #8c4f00;
  --primary-container: #e88a1a;
  --primary-fixed: #ffdcc0;
  --primary-fixed-dim: #ffb875;
  --on-primary: #ffffff;
  --on-primary-container: #552e00;

  /* Surface tiers (light) */
  --surface: #fcf9f8;
  --surface-bright: #fcf9f8;
  --surface-dim: #dcd9d9;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f6f3f2;
  --surface-container: #f0eded;
  --surface-container-high: #eae7e7;
  --surface-container-highest: #e5e2e1;

  /* Foreground */
  --on-surface: #1c1b1b;
  --on-surface-variant: #544435;
  --on-background: #1c1b1b;
  --background: #fcf9f8;

  /* Outline (used at <20% opacity only — see No-Line Rule) */
  --outline: #877363;
  --outline-variant: #dac2af;

  /* Status */
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error: #ffffff;
  --success: #2e7d32;

  /* Inverse (for snackbars etc.) */
  --inverse-surface: #313030;
  --inverse-on-surface: #f3f0ef;
  --inverse-primary: #ffb875;

  /* Glassmorphism (light) */
  --glass-bg: rgba(252, 249, 248, 0.80);
  --glass-blur: 20px;

  /* Signature gradient: 135° primary → primary-container */
  --gradient-primary: linear-gradient(135deg, #8c4f00 0%, #e88a1a 100%);
  --gradient-primary-soft: linear-gradient(135deg, #ffb875 0%, #e88a1a 100%);

  /* Radii */
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Shadows (warm-tinted, never pure black) */
  --shadow-ambient: 0 4px 20px rgba(28, 27, 27, 0.04);
  --shadow-float: 0 24px 60px rgba(28, 27, 27, 0.06);
  --shadow-fab: 0 8px 30px rgba(140, 79, 0, 0.20);

  /* Typography scale */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing tokens (used by view-transition + safe areas) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================== Dark mode ============================== */
.dark {
  /* Surface tiers (Cinematic Transcript) */
  --surface: #131313;
  --surface-bright: #393939;
  --surface-dim: #131313;
  --surface-container-lowest: #0e0e0e;
  --surface-container-low: #1a1919;
  --surface-container: #201f1f;
  --surface-container-high: #2a2929;
  --surface-container-highest: #353534;

  /* Foreground */
  --on-surface: #e5e2e1;
  --on-surface-variant: #dac2af;
  --on-background: #e5e2e1;
  --background: #131313;

  /* Brand stays warm */
  --primary: #ffb875;
  --primary-container: #e88a1a;
  --on-primary: #2d1600;
  --on-primary-container: #552e00;

  /* Outline */
  --outline: #9a8470;
  --outline-variant: #544435;

  /* Glass (dark) */
  --glass-bg: rgba(19, 19, 19, 0.75);

  /* Shadows (deeper) */
  --shadow-ambient: 0 4px 20px rgba(0, 0, 0, 0.30);
  --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.40);
  --shadow-fab: 0 8px 30px rgba(232, 138, 26, 0.25);
}

/* ============================ Reset / base ============================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--background);
  color-scheme: light dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--on-surface);
  min-height: 100dvh;
  overscroll-behavior: none;
  touch-action: manipulation;
  font-size: 16px;
  line-height: 1.5;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

a { color: inherit; text-decoration: none; }

/* No-Line Rule: ::selection */
::selection {
  background: var(--primary-container);
  color: #ffffff;
}