/* ============================================================
   Eliten — Color tokens
   Near-monochrome indigo (hue=264.30, chroma=0.0156, lightness=0.29).
   Extracted from the HeroUI v3 theme builder. LIGHT is the default;
   dark is a manual override applied via [data-theme="dark"].
   Source of truth: apps/web/src/styles/globals.css
   ============================================================ */

:root {
  /* ---- Primitives (constant across themes) ---- */
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --snow: oklch(99.11% 0 0);
  --eclipse: oklch(21.03% 0.0059 264.30);
}

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

  /* Base */
  --background: oklch(97.02% 0.0011 264.30);   /* page canvas */
  --foreground: oklch(21.03% 0.0011 264.30);   /* primary text */

  /* Surfaces (cards, panels) */
  --surface: oklch(100.00% 0.0006 264.30);             /* cards, login panel */
  --surface-foreground: var(--foreground);
  --surface-secondary: oklch(95.24% 0.0009 264.30);    /* sidebar, gradient end */
  --surface-secondary-foreground: var(--foreground);
  --surface-tertiary: oklch(93.73% 0.0009 264.30);     /* tonal pill emphasis */
  --surface-tertiary-foreground: var(--foreground);

  /* Overlay (tooltips, popovers, modals, menus — highest elevation) */
  --overlay: oklch(100.00% 0.0003 264.30);
  --overlay-foreground: var(--foreground);

  /* Neutrals */
  --muted: oklch(55.17% 0.0022 264.30);        /* subtle copy */
  --scrollbar: oklch(87.10% 0.0011 264.30);
  --default: oklch(94.00% 0.0011 264.30);      /* secondary surfaces */
  --default-foreground: var(--foreground);

  /* Brand / accent — near-black indigo. Primary CTA + focus ring. */
  --accent: oklch(29.22% 0.0156 264.30);
  --accent-foreground: var(--snow);

  /* Form fields */
  --field-background: var(--surface);
  --field-foreground: var(--foreground);
  --field-placeholder: var(--muted);
  --field-border: transparent;

  /* Status */
  --success: oklch(73.29% 0.1939 152.07);
  --success-foreground: oklch(21.03% 0.0059 152.07);
  --success-text: oklch(52.00% 0.1500 152.07);   /* legible success text on light surfaces */
  --warning: oklch(78.19% 0.1588 73.59);
  --warning-foreground: oklch(21.03% 0.0059 73.59);
  --danger: oklch(65.32% 0.2333 27.00);
  --danger-foreground: var(--snow);
  --danger-text: oklch(55.00% 0.2100 27.00);     /* legible danger text on light surfaces */

  /* Lines */
  --segment: oklch(100.00% 0.0011 264.30);
  --segment-foreground: var(--foreground);
  --border: oklch(90.00% 0.0011 264.30);       /* container hairlines */
  --separator: oklch(92.00% 0.0011 264.30);    /* dividers */
  --focus: var(--accent);
  --link: var(--foreground);
  --backdrop: rgba(15, 15, 25, 0.45);

  /* ---- Eliten product accents ---- */
  --color-token-gold: #f5b800;                 /* token / credit economy amber */
  --color-save-badge: oklch(64% 0.165 52);     /* the one sanctioned warm accent — Save badge */
  --color-avatar-from: #ec4899;                /* user avatar gradient — pink */
  --color-avatar-to: #f97316;                  /* user avatar gradient — orange */

  /* Pricing page scoped cobalt (approved override of the global indigo accent) */
  --pricing-accent: oklch(45% 0.15 264);
}

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

  --background: oklch(12.00% 0.0011 264.30);
  --foreground: oklch(99.11% 0.0011 264.30);

  --surface: oklch(21.03% 0.0022 264.30);
  --surface-foreground: var(--foreground);
  --surface-secondary: oklch(25.70% 0.0016 264.30);    /* brightest UI surface in dark */
  --surface-secondary-foreground: var(--foreground);
  --surface-tertiary: oklch(27.21% 0.0016 264.30);
  --surface-tertiary-foreground: var(--foreground);

  --overlay: oklch(21.03% 0.0022 264.30);
  --overlay-foreground: var(--foreground);

  --muted: oklch(70.50% 0.0022 264.30);
  --scrollbar: oklch(70.50% 0.0011 264.30);
  --default: oklch(27.40% 0.0011 264.30);
  --default-foreground: var(--snow);

  /* Inverted from light 29.22% (shadcn-neutral / HeroUI-ocean pattern): a near-black
     accent is ~1.4:1 on the 12% canvas, so accent-as-foreground was invisible. */
  --accent: oklch(92.00% 0.0156 264.30);
  --accent-foreground: var(--eclipse);

  --field-background: var(--surface);
  --field-foreground: var(--foreground);
  --field-placeholder: var(--muted);
  --field-border: transparent;

  --success: oklch(73.29% 0.1939 152.07);
  --success-foreground: oklch(21.03% 0.0059 152.07);
  --warning: oklch(82.03% 0.1391 77.60);
  --warning-foreground: oklch(21.03% 0.0059 77.60);
  --danger: oklch(59.40% 0.1971 25.89);
  --danger-foreground: var(--snow);
  --success-text: var(--success);                /* light green already legible on dark */
  --danger-text: oklch(72.00% 0.1900 25.89);

  --segment: oklch(39.64% 0.0011 264.30);
  --segment-foreground: var(--foreground);
  --border: oklch(28.00% 0.0011 264.30);
  --separator: oklch(25.00% 0.0011 264.30);
  --focus: var(--accent);
  --link: var(--foreground);
  --backdrop: rgba(0, 0, 0, 0.6);

  --pricing-accent: oklch(80% 0.10 264);
}

/* ---- Pricing / billing scope ----
   The /billing surface (PricingCard, CreditPackCard, primary Button, focus ring) is re-skinned
   from the global indigo to an approved cobalt. Production remaps --accent itself under
   [data-pricing-accent]; mirror that so every var(--accent) reference (credit numbers, selected
   ring, emphasized checks, the "popular" badge, CTA) turns cobalt on this surface. */
[data-pricing-accent] {
  --accent: var(--pricing-accent);
  --focus: var(--pricing-accent);
}