/* ============================================================
   Not Every Mom — Design System Tokens v3.1
   Shared CSS custom properties consumed by all components.
   Source of truth: kindred-mama-ai repo index.css + DS v3

   Architecture (3-layer stack):
   ┌─────────────────────────────────────────────────────┐
   │  Layer 3 — theme-system.js  (feel-mode cosmetics)   │
   │  Overrides: --t-page-bg, --t-accent, --t-card-border│
   │  --t-surface-recessed, --t-user-bg, etc.            │
   ├─────────────────────────────────────────────────────┤
   │  Layer 2 — .dark class  (canonical dark overrides)   │
   │  Flips ALL semantic tokens. Repo convention.         │
   │  Tailwind dark: prefix keys off this class.          │
   ├─────────────────────────────────────────────────────┤
   │  Layer 1 — :root  (light-mode defaults)              │
   │  Brand colors, semantic tokens, persona palettes.    │
   └─────────────────────────────────────────────────────┘

   Components should read semantic tokens — never hardcode.
   Tailwind integration: use hsl(var(--token)) pattern.
   ============================================================ */

/* ─── Layer 1: Light-mode defaults ─────────────────────────── */
:root {
  /* Base font size — accessibility-driven (repo: 18px) */
  font-size: 18px;

  /* ── Brand ── */
  --powder-blue: 200 35% 70%;
  --muted-gold: 34 41% 61%;
  --dark-brown: 25 51% 13%;
  --light-cyan: 189 100% 96%;
  --deep-green: 152 18% 32%;

  /* ── Semantic ── */
  --background: 189 100% 96%;
  --foreground: 25 51% 13%;
  --card: 0 0% 100%;
  --card-foreground: 25 51% 13%;
  --primary: 200 35% 70%;
  --primary-foreground: 25 51% 13%;
  --secondary: 34 41% 61%;
  --secondary-foreground: 25 51% 13%;
  --muted: 189 100% 96%;
  --muted-foreground: 152 18% 32%;
  --accent: 152 18% 32%;
  --accent-foreground: 0 0% 100%;
  --border: 200 20% 85%;
  --input: 200 20% 90%;
  --ring: 200 35% 70%;

  /* ── Status ── */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --success: 152 40% 45%;
  --success-foreground: 0 0% 100%;
  --warning: 34 41% 55%;
  --warning-foreground: 25 51% 13%;
  --info: 200 35% 65%;
  --info-foreground: 25 51% 13%;

  /* ── Persona — Rose ── */
  --rose-primary: 15 85% 65%;
  --rose-secondary: 345 60% 75%;
  --rose-accent: 25 70% 80%;
  --rose-muted: 15 30% 92%;

  /* ── Persona — Vera ── */
  --vera-primary: 152 45% 35%;
  --vera-secondary: 140 35% 45%;
  --vera-accent: 130 25% 60%;
  --vera-muted: 152 20% 90%;

  /* ── Persona — Betsy ── */
  --betsy-primary: 186 60% 55%;
  --betsy-secondary: 200 50% 65%;
  --betsy-accent: 175 40% 75%;
  --betsy-muted: 186 25% 92%;

  /* ── Persona — Hazel ── */
  --hazel-primary: 270 65% 60%;
  --hazel-secondary: 290 50% 70%;
  --hazel-accent: 260 40% 80%;
  --hazel-muted: 270 25% 92%;

  /* ── Sidebar ── */
  --sidebar-background: 40 20% 97%;
  --sidebar-foreground: 25 51% 13%;
  --sidebar-primary: 200 35% 70%;
  --sidebar-primary-foreground: 25 51% 13%;
  --sidebar-accent: 152 18% 32%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 200 20% 85%;
  --sidebar-ring: 200 35% 70%;

  /* ── Focus ── */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(
    135deg,
    hsl(var(--powder-blue)),
    hsl(var(--muted-gold))
  );
  --gradient-subtle: linear-gradient(
    180deg,
    hsl(var(--light-cyan)),
    hsl(var(--background))
  );
  --gradient-hero: linear-gradient(
    135deg,
    hsl(var(--background)) 0%,
    hsl(var(--powder-blue) / 0.03) 50%,
    hsl(var(--muted-gold) / 0.03) 100%
  );
  --gradient-warm: linear-gradient(
    45deg,
    hsl(var(--muted-gold) / 0.1),
    hsl(var(--powder-blue) / 0.1)
  );
  --iridescent-gradient: linear-gradient(
    135deg,
    hsl(var(--powder-blue) / 0.15),
    hsl(var(--muted-gold) / 0.15),
    hsl(var(--deep-green) / 0.15)
  );

  /* ── Shadows ── */
  --shadow-gentle: 0 4px 16px hsl(var(--powder-blue) / 0.15);
  --shadow-warm: 0 12px 48px hsl(var(--muted-gold) / 0.25);
  --shadow-premium:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 32px 0 hsl(var(--dark-brown) / 0.12);

  /* ── Radius ── */
  --radius: 0.75rem;
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* ── Motion ── */
  --transition-gentle: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Type ── */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ─── Layer 2: Canonical dark mode ─────────────────────────── */
/* Standard .dark class — repo convention.                       */
/* Tailwind dark: prefix keys off this. theme-system.js toggles  */
/* this class AND applies feel-mode cosmetics on top (Layer 3).  */
/* Components should never hardcode dark colors.                 */

.dark {
  --background: 152 18% 8%;
  --foreground: 189 100% 96%;
  --card: 152 18% 12%;
  --card-foreground: 189 100% 96%;
  --primary: 200 35% 65%;
  --primary-foreground: 25 51% 13%;
  --secondary: 34 35% 55%;
  --secondary-foreground: 25 51% 13%;
  --muted: 152 18% 15%;
  --muted-foreground: 200 20% 70%;
  --accent: 152 18% 20%;
  --accent-foreground: 189 100% 96%;
  --border: 152 18% 20%;
  --input: 152 18% 18%;
  --ring: 200 35% 60%;

  /* Status — dark */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --success: 152 40% 50%;
  --success-foreground: 152 18% 8%;
  --warning: 34 41% 60%;
  --warning-foreground: 25 51% 13%;
  --info: 200 35% 70%;
  --info-foreground: 25 51% 13%;

  /* Persona — adjusted for dark backgrounds */
  --rose-primary: 15 80% 60%;
  --rose-secondary: 345 55% 70%;
  --rose-accent: 25 65% 75%;
  --rose-muted: 15 25% 18%;

  --vera-primary: 152 40% 42%;
  --vera-secondary: 140 30% 50%;
  --vera-accent: 130 20% 55%;
  --vera-muted: 152 15% 18%;

  --betsy-primary: 186 55% 50%;
  --betsy-secondary: 200 45% 60%;
  --betsy-accent: 175 35% 70%;
  --betsy-muted: 186 20% 18%;

  --hazel-primary: 270 60% 55%;
  --hazel-secondary: 290 45% 65%;
  --hazel-accent: 260 35% 75%;
  --hazel-muted: 270 20% 18%;

  /* Sidebar — dark */
  --sidebar-background: 152 18% 10%;
  --sidebar-foreground: 189 100% 96%;
  --sidebar-primary: 200 35% 65%;
  --sidebar-primary-foreground: 25 51% 13%;
  --sidebar-accent: 152 18% 25%;
  --sidebar-accent-foreground: 189 100% 96%;
  --sidebar-border: 152 18% 20%;
  --sidebar-ring: 200 35% 60%;

  /* Gradients — dark */
  --gradient-primary: linear-gradient(
    135deg,
    hsl(200 35% 55%),
    hsl(34 35% 50%)
  );
  --gradient-subtle: linear-gradient(180deg, hsl(152 18% 10%), hsl(152 18% 8%));
  --gradient-hero: linear-gradient(
    135deg,
    hsl(152 18% 8%) 0%,
    hsl(200 35% 65% / 0.05) 50%,
    hsl(34 35% 55% / 0.05) 100%
  );
  --gradient-warm: linear-gradient(
    45deg,
    hsl(34 35% 55% / 0.08),
    hsl(200 35% 60% / 0.08)
  );
  --iridescent-gradient: linear-gradient(
    135deg,
    hsl(200 35% 65% / 0.1),
    hsl(34 35% 55% / 0.1),
    hsl(152 18% 42% / 0.1)
  );

  /* Shadows — dark */
  --shadow-gentle: 0 4px 16px hsl(0 0% 0% / 0.3);
  --shadow-warm: 0 12px 48px hsl(0 0% 0% / 0.4);
  --shadow-premium:
    0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 32px 0 hsl(0 0% 0% / 0.3);
}

/* ─── Persona theme overrides ──────────────────────────────── */
/* Repo convention: [data-theme="persona"] remaps --primary,     */
/* --secondary, --ring when a persona is active. Applied to the  */
/* root or a scoped container. Works in both light and dark.     */

[data-theme="rose"] {
  --primary: 15 85% 65%;
  --primary-foreground: 0 0% 100%;
  --secondary: 345 60% 75%;
  --ring: 15 85% 65%;
}
.dark[data-theme="rose"],
.dark [data-theme="rose"] {
  --primary: 15 80% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 345 55% 70%;
  --ring: 15 80% 60%;
}

[data-theme="vera"] {
  --primary: 152 45% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 140 35% 45%;
  --ring: 152 45% 35%;
}
.dark[data-theme="vera"],
.dark [data-theme="vera"] {
  --primary: 152 40% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 140 30% 50%;
  --ring: 152 40% 42%;
}

[data-theme="betsy"] {
  --primary: 186 60% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 200 50% 65%;
  --ring: 186 60% 55%;
}
.dark[data-theme="betsy"],
.dark [data-theme="betsy"] {
  --primary: 186 55% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 200 45% 60%;
  --ring: 186 55% 50%;
}

[data-theme="hazel"] {
  --primary: 270 65% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 290 50% 70%;
  --ring: 270 65% 60%;
}
.dark[data-theme="hazel"],
.dark [data-theme="hazel"] {
  --primary: 270 60% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 290 45% 65%;
  --ring: 270 60% 55%;
}

/* ─── Accessibility ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-gentle: none;
    --transition-bounce: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --border: 25 51% 20%;
    --card-foreground: 0 0% 0%;
    --foreground: 0 0% 0%;
    --muted-foreground: 25 51% 20%;
  }
  .dark {
    --border: 200 20% 80%;
    --card-foreground: 0 0% 100%;
    --foreground: 0 0% 100%;
    --muted-foreground: 200 20% 80%;
  }
}