:root {
  /* ======================================================== */
  /* TAPPI DESIGN SYSTEM V2.0 — PLAYFUL GOOGLE BRAND PALETTE  */
  /* Source: UI Color Palette (Google Inspired)              */
  /* ======================================================== */

  /* 1. Primary Colors (from UI Color Palette image) */
  --color-blue: #0275EF;
  --color-deep-blue: #0275EF;
  --color-red: #FE310B;
  --color-orange: #FB4827;
  --color-yellow: #FAAA0A;
  --color-green: #05AC45;

  /* 2. Neutral Colors (from UI Color Palette image) */
  --color-off-white: #F7F7F5;
  --color-dark-text: #111111;
  --color-gray: #A5A4A4;
  --color-gray-light: #E5E4E4;
  --color-gray-soft: #F0EEEE;

  /* 3. Support Colors (from UI Color Palette image) */
  --color-soft-peach: #F4AA99;
  --color-warm-coral: #EA8F6F;
  --color-muted-coral: #E86C57;

  /* Brand Semantic Mappings */
  --tappi-blue: #0275EF;
  --tappi-deep-blue: #0275EF;
  --tappi-red: #FE310B;
  --tappi-orange: #FB4827;
  --tappi-yellow: #FAAA0A;
  --tappi-green: #05AC45;

  /* Surfaces & Background */
  --tappi-bg: #F7F5F5;
  --tappi-surface: #FFFFFF;
  --tappi-surface-soft: #F0F4F9;
  --tappi-surface-muted: #E8EEF5;
  --tappi-surface-glow: radial-gradient(circle at 50% 0%, rgba(6, 131, 252, 0.12) 0%, rgba(5, 172, 69, 0.08) 45%, transparent 75%);

  /* Ink & Typography */
  --tappi-ink: #151311;
  --tappi-ink-2: #3E3C3A;
  --tappi-ink-3: #7A7876;
  --tappi-ink-muted: #A5A4A4;

  /* Borders */
  --tappi-border: rgba(21, 19, 17, 0.1);
  --tappi-border-subtle: rgba(21, 19, 17, 0.06);
  --tappi-border-glow: rgba(6, 131, 252, 0.35);

  /* Primary Action: Vibrant Blue */
  --tappi-primary: #0683FC;
  --tappi-primary-hover: #0275EF;
  --tappi-primary-600: #0275EF;
  --tappi-primary-accent: #0683FC;
  --tappi-primary-100: #D8ECFE;
  --tappi-primary-50: #EEF7FF;

  /* Semantic Feedback */
  --tappi-success: #05AC45;
  --tappi-success-50: #E6F7ED;
  --tappi-warning: #FAAA0A;
  --tappi-warning-50: #FFF8E6;
  --tappi-danger: #FE310B;
  --tappi-danger-50: rgba(244, 170, 153, 0.25);
  --tappi-peach: #F4AA99;
  --tappi-coral: #FB4827;

  /* Backward Compatibility Aliases */
  --tappi-forest: #0275EF;
  --tappi-spruce: #151311;
  --tappi-emerald: #05AC45;
  --tappi-lime: #05AC45;
  --tappi-lime-pale: #E6F7ED;
  --tappi-pistachio: #D8ECFE;
  --tappi-ice-mint: #E1F0FE;
  --tappi-cobalt: #0683FC;
  --tappi-olive: #0275EF;
  --tappi-pro: #0275EF;
  --tappi-pro-soft: #EEF7FF;

  /* Typography: Native Google Sans & Plus Jakarta Sans */
  --font-sans: "Google Sans", "Product Sans", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Google Sans", "Product Sans", "Plus Jakarta Sans", sans-serif;
  --font-accent: "Google Sans", "Product Sans", "Plus Jakarta Sans", sans-serif;
  --fs-hero: clamp(2.35rem, 3.8vw, 3.4rem);
  --fs-display: clamp(1.75rem, 2.6vw, 2.35rem);
  --fs-h1: clamp(1.35rem, 2vw, 1.8rem);
  --fs-h2: clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-h3: 1.15rem;
  --fs-body-lg: 1.05rem;
  --fs-body: 0.95rem;
  --fs-small: 0.8125rem;
  --fs-xs: 0.72rem;
  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.55;
  --tracking-tight: -0.03em;
  --tracking-heading: -0.02em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.25rem;
  --space-12: 2.75rem;
  --space-16: 3.25rem;
  --space-20: 4rem;
  --space-24: 4.75rem;
  --space-32: 6rem;

  /* Radius */
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-2xl: 2.5rem;
  --radius-pill: 999px;

  /* Shadows - Crisp Apple & Google Depth */
  --shadow-xs: 0 1px 2px rgba(21, 19, 17, 0.04);
  --shadow-sm: 0 8px 24px rgba(21, 19, 17, 0.06);
  --shadow-md: 0 16px 48px rgba(21, 19, 17, 0.08);
  --shadow-float: 0 24px 64px rgba(6, 131, 252, 0.14);
  --shadow-glow: 0 0 45px rgba(6, 131, 252, 0.25);

  /* Safe Area Inset Tokens */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --touch-min: 44px;

  /* Layout — Apple Expansive Full-Width Standards */
  --container: 1440px;
  --container-wide: 1680px;
  --gutter: clamp(1rem, 3.5vw, 3.5rem);
  --sidebar: 256px;
  --topbar: 52px;
  --app-topbar: 64px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-component: 320ms;
  --duration-editorial: 700ms;
}

/* Accessibility */
:focus-visible { outline: 2px solid var(--tappi-emerald); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}