/* =========================================================
   Galiwala design tokens — "AI night" (dark) and "holographic porcelain" (light)
   Single source for colour, type, radius, elevation and motion.
   Mirrored 1:1 in /design/tokens.json for the Flutter apps (ThemeData + ThemeExtension);
   change a value in both files.
   Roles: lilac (violet) + cyan = AI and the page glow, marigold/saffron = brand and primary
   actions only, jade = open/live, rose = Buy & Sell / alerts. Dark is the default; light is
   :root[data-theme="light"] (assets/js/theme.js).
   ========================================================= */

:root {
  color-scheme: dark;

  /* canvas + surfaces */
  --bg: #05060d;
  --bg-2: #0a0c19;
  --bg-3: #11142a;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --line: rgba(170, 160, 255, 0.13);
  --line-2: rgba(170, 160, 255, 0.24);
  --line-3: rgba(170, 160, 255, 0.45);
  --glass: rgba(10, 12, 25, 0.62);
  --glass-strong: rgba(10, 12, 25, 0.92);
  --shadow: rgba(0, 0, 0, 0.85);
  --phone-bg: #0a0b14;
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)), var(--bg-2);
  --card-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* text */
  --you: #ffffff;
  --text: #f3f1fb;
  --text-soft: #d3d1e6;
  --muted: #a4a3bd;
  --dim: #6c6b88;

  /* roles */
  --marigold: #ffb547;
  --saffron: #ff7a2f;
  --jade: #36e2b4;
  --lilac: #a99cff;
  --ai-deep: #6d5cff;
  --cyan: #3fe0ff;
  --pink: #ff7ad9;
  --rose: #ff6f91;
  --on-lilac: #140f33;
  --on-jade: #072a20;
  --on-brand: #1a1003;

  --svc: var(--marigold);
  --shop: var(--jade);
  --evt: var(--lilac);

  /* business section ("paper" block) + dark ink used on it */
  --cream: #f6f0e4;
  --cream-2: #ece3d2;
  --ink: #15161c;
  --ink-muted: #5d5a55;

  /* gradients + glows */
  --grad: linear-gradient(120deg, #ff7a2f, #ffb547 55%, #ffd88a);
  --grad-ai: linear-gradient(135deg, #a99cff, #6d5cff);
  --holo: linear-gradient(100deg, #3fe0ff 0%, #a99cff 38%, #ff7ad9 68%, #ffb547 100%);
  --grad-aurora: var(--holo);
  --glow-brand: 0 18px 50px -18px rgba(255, 140, 50, 0.6);
  --glow-ai: 0 18px 60px -20px rgba(109, 92, 255, 0.75);
  --aurora-a: rgba(109, 92, 255, 0.5);
  --aurora-b: rgba(63, 224, 255, 0.3);
  --aurora-c: rgba(255, 122, 217, 0.18);

  /* 3D hero orb (assets/js/hero3d.js reads these) */
  --orb-a: #6d5cff;
  --orb-b: #3fe0ff;
  --orb-c: #ffb547;

  /* shape */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
  --dur-slow: 0.8s;

  /* layout */
  --gutter: clamp(16px, 5vw, 40px);
  --maxw: 1240px;

  /* type: Bricolage Grotesque for display, Inter for text */
  --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: var(--f-display);
  --f-deva: "Noto Sans Devanagari", var(--f-body);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f5fb;
  --bg-2: #ffffff;
  --bg-3: #eeecf8;
  --surface: rgba(40, 30, 120, 0.035);
  --surface-2: rgba(40, 30, 120, 0.07);
  --line: rgba(60, 45, 160, 0.12);
  --line-2: rgba(60, 45, 160, 0.22);
  --line-3: rgba(60, 45, 160, 0.4);
  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.95);
  --shadow: rgba(60, 45, 160, 0.25);
  --phone-bg: #fbfaff;
  --card-bg: linear-gradient(180deg, #ffffff, #fbfaff);
  --card-edge: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px -30px rgba(60, 45, 160, 0.35);

  --you: #12111c;
  --text: #12111c;
  --text-soft: #34324a;
  --muted: #57566f;
  --dim: #8a89a3;

  --marigold: #c25f00;
  --jade: #0a8a66;
  --lilac: #5b47e0;
  --ai-deep: #4a37c9;
  --cyan: #0891b2;
  --pink: #c026d3;
  --rose: #d1335c;
  --on-lilac: #ffffff;
  --on-jade: #ffffff;

  --cream: #f1e7d3;
  --cream-2: #e3d6bd;

  --grad-ai: linear-gradient(135deg, #7c6cff, #4a37c9);
  --holo: linear-gradient(100deg, #0891b2 0%, #5b47e0 40%, #c026d3 70%, #e0561a 100%);
  --glow-brand: 0 14px 34px -16px rgba(220, 110, 20, 0.55);
  --glow-ai: 0 18px 50px -24px rgba(91, 71, 224, 0.55);
  --aurora-a: rgba(124, 108, 255, 0.32);
  --aurora-b: rgba(8, 145, 178, 0.18);
  --aurora-c: rgba(192, 38, 211, 0.12);

  --orb-a: #4a37c9;
  --orb-b: #0891b2;
  --orb-c: #e0561a;
}