/* =========================================================
   Design Tokens — Smart Home Life 2.0
   Apple-inspired, premium, system-aware light/dark
   ========================================================= */

:root {
  /* ---------- Type ---------- */
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", monospace;

  /* Type scale (fluid, clamp() between min/max) */
  --type-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --type-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --type-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --type-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --type-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --type-2xl:  clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --type-3xl:  clamp(2.25rem, 1.85rem + 1.9vw, 3.25rem);
  --type-4xl:  clamp(3rem, 2.4rem + 3vw, 4.75rem);
  --type-5xl:  clamp(3.75rem, 2.8rem + 4.5vw, 6.5rem);

  /* Letter-spacing — tighter as size grows (Apple-style) */
  --tracking-tight: -0.022em;
  --tracking-tighter: -0.032em;
  --tracking-display: -0.042em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ---------- Radii (continuous-feel) ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-3xl: 48px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 40px);
  --nav-height: 64px;

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-normal: 280ms;
  --dur-slow: 480ms;

  /* ---------- Brand ---------- */
  --brand-red: #F55139;       /* Logo's signature red */
  --brand-red-deep: #E8472F;  /* Slightly darker for hover */
  --brand-cream: #EAE6D8;     /* Logo wordmark cream */
  --brand-navy: #0F222D;      /* Logo background navy */
}

/* =========================================================
   LIGHT MODE (default)
   Inspired by apple.com / Apple Home in light environment
   ========================================================= */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg-canvas: #F5F5F7;          /* Apple's signature soft-gray */
  --bg-surface: #FFFFFF;
  --bg-surface-2: #FAFAFC;
  --bg-elevated: #FFFFFF;
  --bg-tinted: rgba(118, 118, 128, 0.08);
  --bg-tinted-strong: rgba(118, 118, 128, 0.16);

  /* Frosted glass nav */
  --bg-nav: rgba(255, 255, 255, 0.72);
  --bg-nav-border: rgba(0, 0, 0, 0.08);

  /* Text */
  --text-primary: #1D1D1F;
  --text-secondary: rgba(29, 29, 31, 0.68);
  --text-tertiary: rgba(29, 29, 31, 0.45);
  --text-on-accent: #FFFFFF;

  /* Strokes / dividers */
  --stroke-subtle: rgba(0, 0, 0, 0.08);
  --stroke-strong: rgba(0, 0, 0, 0.14);

  /* Accent */
  --accent: var(--brand-red);
  --accent-hover: var(--brand-red-deep);
  --accent-soft-bg: rgba(245, 81, 57, 0.10);

  /* Tile backgrounds — soft material */
  --tile-bg: linear-gradient(180deg, #FFFFFF 0%, #F4F4F7 100%);
  --tile-glow: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 35%);
  --tile-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --tile-shadow-hover: 0 4px 12px rgba(0,0,0,0.06), 0 18px 40px rgba(0,0,0,0.10);

  /* Media surface — a light card for product photos to sit on. Slightly darker
     than the page canvas so white-bg product JPGs visually separate from it.
     Apple's "secondary system background" hue. */
  --media-bg: #EBEBEF;
  --media-stroke: rgba(0, 0, 0, 0.05);

  /* Hero gradient (subtle wash) */
  --hero-glow: radial-gradient(ellipse 1200px 600px at 50% -10%,
                rgba(245, 81, 57, 0.08) 0%,
                rgba(245, 81, 57, 0) 60%);
}

/* =========================================================
   DARK MODE — preserves user's current site palette,
   refined toward Apple-Home-on-OLED feel
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: #0B1A23;
  --bg-surface: #16252F;
  --bg-surface-2: #1B2C36;
  --bg-elevated: #21303A;
  --bg-tinted: rgba(255, 255, 255, 0.06);
  --bg-tinted-strong: rgba(255, 255, 255, 0.12);

  --bg-nav: rgba(15, 34, 45, 0.62);
  --bg-nav-border: rgba(255, 255, 255, 0.08);

  --text-primary: #F5F5F7;
  --text-secondary: rgba(245, 245, 247, 0.72);
  --text-tertiary: rgba(245, 245, 247, 0.45);
  --text-on-accent: #FFFFFF;

  --stroke-subtle: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.16);

  --accent: var(--brand-red);
  --accent-hover: var(--brand-red);
  --accent-soft-bg: rgba(245, 81, 57, 0.16);

  --tile-bg: linear-gradient(180deg, #213340 0%, #18272F 100%);
  --tile-glow: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%);
  --tile-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 30px rgba(0,0,0,0.40);
  --tile-shadow-hover: 0 1px 0 rgba(255,255,255,0.06) inset, 0 22px 60px rgba(0,0,0,0.55);

  /* Light "showcase" surface — keeps product JPGs blending in dark mode */
  --media-bg: #F2F2F4;
  --media-stroke: rgba(255, 255, 255, 0.04);

  --hero-glow: radial-gradient(ellipse 1200px 600px at 50% -10%,
                rgba(245, 81, 57, 0.18) 0%,
                rgba(245, 81, 57, 0) 60%);
}

/* System preference fallback when no explicit attribute set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg-canvas: #0B1A23;
    --bg-surface: #16252F;
    --bg-surface-2: #1B2C36;
    --bg-elevated: #21303A;
    --bg-tinted: rgba(255, 255, 255, 0.06);
    --bg-tinted-strong: rgba(255, 255, 255, 0.12);

    --bg-nav: rgba(15, 34, 45, 0.62);
    --bg-nav-border: rgba(255, 255, 255, 0.08);

    --text-primary: #F5F5F7;
    --text-secondary: rgba(245, 245, 247, 0.72);
    --text-tertiary: rgba(245, 245, 247, 0.45);

    --stroke-subtle: rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(255, 255, 255, 0.16);

    --accent: var(--brand-red);
    --accent-hover: var(--brand-red);
    --accent-soft-bg: rgba(245, 81, 57, 0.16);

    --tile-bg: linear-gradient(180deg, #213340 0%, #18272F 100%);
    --tile-glow: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%);
    --tile-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 30px rgba(0,0,0,0.40);
    --tile-shadow-hover: 0 1px 0 rgba(255,255,255,0.06) inset, 0 22px 60px rgba(0,0,0,0.55);

    --media-bg: #F2F2F4;
    --media-stroke: rgba(255, 255, 255, 0.04);

    --hero-glow: radial-gradient(ellipse 1200px 600px at 50% -10%,
                  rgba(245, 81, 57, 0.18) 0%,
                  rgba(245, 81, 57, 0) 60%);
  }
}