/* ==========================================================================
   Digital Detour — Design Tokens
   Art direction: Apple bright accents × Rimowa pop colors × Google primaries
   ========================================================================== */

:root {
  /* Type scale (fluid) */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);

  /* 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.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 520ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1280px;
  --content-full: 100%;

  /* Fonts */
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   DARK MODE (default) — near-black surfaces, vivid pop accents
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --color-bg:             #0A0A0B;
  --color-surface:        #111113;
  --color-surface-2:      #17171A;
  --color-surface-offset: #1D1D21;
  --color-divider:        #26262B;
  --color-border:         #2E2E34;

  /* Text */
  --color-text:        #F5F5F7;
  --color-text-muted:  #A0A0A8;
  --color-text-faint:  #6B6B72;
  --color-text-inverse: #0A0A0B;

  /* Bright accents — inspired by Apple accent colors, Rimowa Pop line, Google primaries */
  --color-cobalt:   #2A5BFF;   /* primary — Google/Apple blue */
  --color-magenta:  #FF2E7E;   /* Rimowa magenta pop */
  --color-orange:   #FF6B1A;   /* Rimowa orange pop + Apple orange */
  --color-sky:      #3ECBFF;   /* Rimowa sky blue */
  --color-lime:     #C6F24E;   /* Google/Apple fresh green */
  --color-yellow:   #FFD60A;   /* Apple/Rimowa sunshine */

  /* Primary (cobalt is the hero) */
  --color-primary:         var(--color-cobalt);
  --color-primary-hover:   #4A75FF;
  --color-primary-contrast: #FFFFFF;

  /* Shadows (colored, for depth on dark) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
  --shadow-glow-cobalt:  0 0 48px rgba(42,91,255,0.35);
  --shadow-glow-magenta: 0 0 48px rgba(255,46,126,0.35);
  --shadow-glow-orange:  0 0 48px rgba(255,107,26,0.35);

  /* Section background gradients */
  --gradient-hero:  radial-gradient(ellipse 80% 60% at 30% 0%, rgba(42,91,255,0.18), transparent 60%),
                    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(255,46,126,0.12), transparent 60%),
                    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,107,26,0.08), transparent 60%);
}

/* --------------------------------------------------------------------------
   LIGHT MODE
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --color-bg:             #FAFAFB;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F3F3F6;
  --color-surface-offset: #EBEBF0;
  --color-divider:        #E4E4EA;
  --color-border:         #D9D9E0;

  --color-text:        #0A0A0B;
  --color-text-muted:  #55555E;
  --color-text-faint:  #8A8A95;
  --color-text-inverse: #FFFFFF;

  --color-cobalt:   #1E47E6;
  --color-magenta:  #E91E6A;
  --color-orange:   #F25A0C;
  --color-sky:      #12B5EF;
  --color-lime:     #8FBB1A;
  --color-yellow:   #E6B800;

  --color-primary:         var(--color-cobalt);
  --color-primary-hover:   #173BC4;
  --color-primary-contrast: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(10,10,11,0.06);
  --shadow-md: 0 8px 24px rgba(10,10,11,0.08);
  --shadow-lg: 0 24px 64px rgba(10,10,11,0.12);
  --shadow-glow-cobalt:  0 12px 40px rgba(30,71,230,0.25);
  --shadow-glow-magenta: 0 12px 40px rgba(233,30,106,0.25);
  --shadow-glow-orange:  0 12px 40px rgba(242,90,12,0.25);

  --gradient-hero:  radial-gradient(ellipse 80% 60% at 30% 0%, rgba(30,71,230,0.10), transparent 60%),
                    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(233,30,106,0.08), transparent 60%),
                    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(242,90,12,0.06), transparent 60%);
}