/* =============================================
   HomeSweetHome — Design Tokens
   ============================================= */

:root {
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Accent scale (orange/amber) */
  --accent-300: oklch(0.84 0.14 75);
  --accent-400: oklch(0.76 0.18 65);
  --accent-500: oklch(0.68 0.20 55);
  --accent-600: oklch(0.58 0.18 50);

  /* Secondary accent (orange-red) */
  --pink-400: oklch(0.72 0.20 30);
  --pink-500: oklch(0.64 0.22 25);

  /* Dark theme (default) */
  --bg-0: oklch(0.16 0.03 285);
  --bg-1: oklch(0.21 0.035 285);
  --fg-0: oklch(0.97 0.01 285);
  --fg-1: oklch(0.82 0.02 285);
  --fg-2: oklch(0.62 0.03 285);
  --line: oklch(1 0 0 / 0.08);
  --line-strong: oklch(1 0 0 / 0.14);

  /* Glass */
  --glass-bg: rgba(30, 24, 58, 0.45);
  --glass-bg-strong: rgba(40, 32, 72, 0.62);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-inner: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 14px 46px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25);
  --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%);

  /* Canvas background (twilight dusk — blue/pink) */
  --canvas-bg:
    radial-gradient(ellipse 60% 50% at 15% 20%, oklch(0.45 0.22 285 / 0.80), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 80%, oklch(0.42 0.16 320 / 0.65), transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 50%, oklch(0.16 0.05 290 / 0.5), transparent 60%),
    linear-gradient(180deg, oklch(0.11 0.04 280), oklch(0.07 0.03 275));

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-inout: cubic-bezier(.45,.05,.25,1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
}