/* ============================================================
   Sunspeak — design tokens
   Logo orange + app secondary blue accents. Warm neutrals.
   ============================================================ */

:root {
  /* UI accent (matches app $secondary) */
  --primary: #0996b9;
  --primary-strong: #077f9c;
  --primary-soft: #b8e8f2;
  --accent: #4db8d4;
  --warm-glow: #d4eef5;

  /* Brand orange (logo + accent pepper) */
  --brand: #cc7a0a;
  --brand-strong: #b56a06;
  --brand-soft: #f6c884;
  --brand-glow: #fde6c2;
  --logo-color: var(--brand);
  --logo-bg: #faf6f0;

  /* Surfaces */
  --background: #ededed;
  --surface: #faf6f0;
  --surface-2: #f3ece1;
  --nav-item-hover: color-mix(in srgb, var(--text) 8%, var(--background));
  --border: rgba(41, 41, 41, 0.08);
  --border-strong: rgba(41, 41, 41, 0.16);

  /* Text */
  --text: #292929;
  --text-soft: #555555;
  --text-muted: #8a8a8a;
  --link: #077f9c;

  /* Toggle (matches alzenware site) */
  --thumb: #cecece;
  --track: #f2f2f2;
  --icon: #6b7280;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(41, 41, 41, 0.05),
    0 6px 16px rgba(41, 41, 41, 0.04);
  --shadow-md: 0 2px 4px rgba(41, 41, 41, 0.06),
    0 16px 36px rgba(41, 41, 41, 0.07);
  --shadow-lg: 0 4px 10px rgba(41, 41, 41, 0.08),
    0 24px 60px rgba(9, 150, 185, 0.12);

  /* Gradients (blue + surface) */
  --gradient-warm: linear-gradient(
    135deg,
    #d4eef5 0%,
    #b8e8f2 35%,
    var(--surface) 72%,
    var(--surface) 100%
  );
  /* Hero: mirror of --gradient-warm (135deg, surface → blue, mostly blue) */
  --gradient-hero: linear-gradient(
    135deg,
    var(--surface) 0%,
    var(--surface) 28%,
    #b8e8f2 65%,
    #d4eef5 100%
  );

  color-scheme: light;
}

.dark {
  /* UI accent (matches app $secondary) */
  --primary: #68e9f8;
  --primary-strong: #9ef5fc;
  --primary-soft: #1a3d45;
  --accent: #9ef5fc;
  --warm-glow: #1a3238;

  /* Brand orange */
  --brand: #ffd866;
  --brand-strong: #f4b942;
  --brand-soft: #4a3a23;
  --brand-glow: #3a2f1f;
  --logo-color: var(--brand);
  --logo-bg: #25201b;

  --background: #1c1815;
  --surface: #25201b;
  --surface-2: #2f2924;
  --nav-item-hover: var(--surface-2);
  --border: rgba(244, 244, 242, 0.08);
  --border-strong: rgba(244, 244, 242, 0.18);

  --text: #f4f1ec;
  --text-soft: #c8c2b9;
  --text-muted: #9a948a;
  --link: #68e9f8;

  --thumb: #f4f1ec;
  --track: #3a3530;
  --icon: #f2f2f2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 36px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.4),
    0 24px 60px rgba(104, 233, 248, 0.14);

  --gradient-warm: linear-gradient(
    135deg,
    #1a3238 0%,
    #1a4a55 45%,
    var(--surface) 78%,
    var(--surface) 100%
  );
  --gradient-hero: linear-gradient(
    135deg,
    var(--surface) 0%,
    var(--surface) 22%,
    #1a4a55 55%,
    #1a3238 100%
  );

  color-scheme: dark;
}