/* ============================================================================
   HINT IT — v2 design system : TOKENS (single source of truth)
   ----------------------------------------------------------------------------
   Mirrors the mobile apps' tokens so web + mobile share one brand language:
     • color ramp / surfaces / semantic  → consumer-app + business-app theme/colors.ts
     • spacing / radius / shadow / motion / z → business-app theme/spacing.ts
     • type roles + families              → business-app theme/typography.ts
                                            + packages/tokens/src/fonts.ts

   Defined on `.hint-v2` (NOT :root) on purpose: this physically cannot collide
   with the three competing legacy `:root` token blocks (all.css,
   modal-feedback-styles.css, ConsumerFeedback.razor.css). Only v2 subtrees see
   these values. Reference tokens via var(--x) — never hardcode a hex/px.
   ============================================================================ */

.hint-v2 {
  /* ---- Purple ramp (mobile colors.ts) ---- */
  --purple-900: #331c54;
  --purple-700: #462775;   /* the website's iconic deep-purple brand surface */
  --purple-600: #5a398a;
  --purple-500: #6c41ad;
  --purple-400: #a582d9;
  --purple-300: #c5a8eb;
  --purple-100: #ede1ff;

  /* ---- Brand roles ---- */
  --brand: var(--purple-700);          /* deep purple identity (backgrounds, hero) */
  --primary: var(--purple-500);        /* interactive primary (matches mobile `primary`) */
  --primary-hover: var(--purple-600);
  --accent-coral: #ff6161;             /* marketing accent (existing learn-more coral) */
  /* Semantic brand tokens — resolve to the ramp in light, but (unlike the raw ramp /
     --brand, which are deliberately NOT overridden in dark) DO lighten in dark so
     brand-colored text/glyphs on a surface stay legible. Use these instead of a raw
     --purple-700 / --brand when the value sits ON a surface. */
  --text-brand: var(--purple-700);     /* brand-colored text/glyph on a surface */

  /* ---- Surfaces ---- */
  --bg-page: #f8f9fa;
  --bg-screen: #f5f3f8;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #faf8fc;
  --bg-elevated: #f0ecf5;
  --bg-quote: #ffffda;
  --bg-brand: var(--purple-700);
  /* Brand-tinted surfaces — light = the purple-100 tint, but (unlike the raw ramp)
     re-themed in dark so a tinted band / selected row isn't a bright slab on near-black. */
  --bg-tint: var(--purple-100);        /* subtle brand-tinted full-width section/band */
  --bg-selected: var(--purple-100);    /* selected/active list-row highlight */

  /* ---- Overlay / scrim (drawer + modal backdrops) ---- */
  --scrim: color-mix(in srgb, #000 50%, transparent);   /* == rgba(0,0,0,.5), matches the app drawer scrim */

  /* ---- Text ---- */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-on-primary: #ffffff;
  --text-on-brand: #ffffff;
  --text-on-brand-muted: #d1bdef;

  /* ---- Borders ---- */
  --border: #e5e7eb;
  --border-card: #bfb1d4;
  --border-input: #e8e0f3;
  --border-on-brand: rgba(255, 255, 255, 0.12);   /* hairline divider on a purple/brand band */

  /* ---- Semantic ---- */
  --danger: #dc2626;   --danger-bg: #fee2e2;  --danger-text: #991b1b;
  --safe: #059669;     --safe-bg: #d1fae5;    --safe-text: #065f46;
  --warning: #d97706;  --warning-bg: #fef3c7; --warning-text: #92400e;
  --info: #2563eb;     --info-bg: #dbeafe;    --info-text: #1e40af;

  /* ---- Spacing scale (mobile space[] = 3xs..6) + web layout extensions ---- */
  --space-3xs: 2px;
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  /* web-only layout steps (marketing sections need more air than the app) */
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-section: clamp(48px, 8vw, 96px);

  /* ---- Component sizes (icon glyphs + legend/indicator dots) ----
     A small role scale so repeated icon/dot dimensions stop being raw px.
     Tokenize values that actually repeat; intrinsic one-off control internals
     (checkbox/switch/OTP cells in forms.css) deliberately stay literal. */
  --size-icon-xs: 12px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 28px;
  --size-dot: 10px;

  /* ---- Radius (mobile radius[]) ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-input: 8px;
  --radius-button: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-card: 16px;
  --radius-fab: 18px;     /* consumer-app DropHintFAB button radius */
  --radius-3xl: 20px;
  --radius-pill: 30px;
  --radius-full: 9999px;

  /* ---- Shadows (mobile shadows[] → CSS box-shadow) ---- */
  --shadow-card: 0 2px 8px rgba(70, 39, 117, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(70, 39, 117, 0.12);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.2);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-fab: 6px 6px 20px rgba(0, 0, 0, 0.1);   /* learn-more drop-hint FAB (RN offset 6,6 · blur 20) */

  /* ---- Motion (mobile duration[]/easing[]) ---- */
  --dur-hover: 150ms;
  --dur-press: 120ms;
  --dur-quick: 200ms;
  --dur-base: 250ms;
  --dur-drawer: 300ms;
  --dur-slow: 350ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---- Z-index ladder (mobile z[] + toast) — NO raw z-index in v2 CSS ---- */
  --z-nav: 100;
  --z-backdrop: 200;
  --z-drawer: 201;
  --z-modal: 300;
  --z-modal-panel: 301;
  --z-toast: 400;

  /* ---- Typography : families ---- */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'M PLUS Rounded 1c', 'Inter', sans-serif;

  /* ---- Typography : weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display-medium: 500;
  --fw-display-bold: 700;
  --fw-display-extrabold: 800;
  --fw-display-black: 900;

  /* ---- Typography : role sizes (Workhorse scale — mobile typeScale) ---- */
  --text-title: 28px;
  --text-heading: 22px;
  --text-subhead: 18px;
  --text-body: 16px;
  --text-label: 13px;
  --text-micro: 11px;
  /* number roles */
  --text-metric: 24px;
  --text-metric-dense: 16px;
  --text-metric-hero: 40px;
  /* web display/marketing sizes (fluid — web can clamp(), RN can't) */
  --text-display: clamp(2rem, 5vw, 3.25rem);
  --text-display-sm: clamp(1.5rem, 4vw, 2.25rem);

  /* ---- Line heights ---- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ---- Layout widths (mobile panelMaxWidth 760) ---- */
  --container-max: 1100px;
  --container-narrow: 760px;

  /* ---- Focus ---- */
  --focus-ring: var(--primary);
}

/* ============================================================================
   DARK MODE — "Purple Dark" (token override only)
   ----------------------------------------------------------------------------
   Design reference: the consumer app's admin-only `purpleDarkColors`
   (consumer-app/theme/colors.ts) — a deep #160d28 backdrop, stepped up by layer,
   with the FULL-STRENGTH brand purples kept on buttons (--primary/--brand are
   left untouched, exactly as the app keeps #6c41ad/#462775) and a few accents
   deliberately muted to tame vibrance on the near-black surfaces.

   Only COLOR tokens are re-declared here; spacing/radius/type/z are unchanged.
   Every v2 component is token-driven, so this single block recolors all of them.

   Applied via an explicit `data-theme="dark"` on the `.hint-v2` wrapper, set
   before paint by the inline bootstrap in V2Shell.razor (which resolves the OS
   `prefers-color-scheme` default + any persisted toggle choice). One selector,
   no `@media` duplicate, no FOUC. Light is the no-JS fallback.

   Layer scale (H≈266, from the app): L0 #160d28 · L1 #20153a · L2 #2b1d4c · L3 #362860
   ============================================================================ */
.hint-v2[data-theme="dark"] {
  /* Surfaces */
  --bg-page: #160d28;       /* L0 — the add-logo backdrop anchor */
  --bg-screen: #160d28;     /* L0 */
  --bg-surface: #20153a;    /* L1 */
  --bg-card: #2b1d4c;       /* L2 */
  --bg-input: #2b1d4c;      /* L2 */
  --bg-elevated: #362860;   /* L3 */
  --bg-quote: #2c2618;      /* muted dark amber (vs light's pale #ffffda) */
  /* Brand band — darkened to L2 (mirrors the app darkening `headerBg` to cardBg:
     the full-strength #462775 reads too bright as a full-width nav/hero band on a
     near-black page). White --text-on-brand still reads fine. */
  --bg-brand: #2b1d4c;
  /* Brand-tinted surfaces — light purple-100 would be a glaring slab on near-black.
     --bg-tint sits just above L0/L1 (quiet band); --bg-selected is a saturated purple
     highlight brighter than the neutral L3 hover (#362860) so "selected" reads as purple. */
  --bg-tint: #241a40;
  --bg-selected: #352363;

  /* Text — warm whites with a purple tint */
  --text-primary: #e6e1ec;
  --text-secondary: #9e96a8;
  --text-muted: #6b6375;
  /* --text-on-primary / --text-on-brand / --text-on-brand-muted stay (white on purple) */
  /* Brand-colored text/glyph on a surface — lightened (the raw --purple-700 / --brand it
     replaces stay dark in dark mode by design, so they'd read dark-on-dark on a surface). */
  --text-brand: var(--purple-300);

  /* Borders */
  --border: #45315e;
  --border-card: #2b1d4c;   /* blend into the card fill, as the app does */
  --border-input: #45315e;
  /* --border-on-brand (white-alpha) works on a purple band in both modes — unchanged */

  /* Semantic — desaturated for dark surfaces; -bg become dark tints, -text become light */
  --danger: #d45858;   --danger-bg: #2d1a1a;  --danger-text: #f0a8a8;
  --safe: #5aad5e;     --safe-bg: #1a2d1c;    --safe-text: #5aad5e;
  --warning: #d4992e;  --warning-bg: #2d2518; --warning-text: #fbbf24;
  --info: #5a9af0;     --info-bg: #18243d;    --info-text: #93b4f0;

  /* Shadows — the card shadows are purple-tinted (invisible/odd on near-black);
     swap to deeper black. The rest (modal/sheet/float/raised/fab) already use black. */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.55);

  /* --brand / --primary / --primary-hover / --accent-coral / --scrim / --focus-ring
     are intentionally NOT overridden — full-strength purples on buttons (app recipe). */

  color-scheme: dark;
}