/* ==========================================================================
   v2-tokens.css — Up-4ever design tokens (shadcn-style HSL custom properties).

   Brand identity is sourced from the official Up-4ever brand kit
   (public_html/Up4ever Brand): a PURPLE primary with a signature
   purple → magenta → gold gradient (the logo mark), plus gold / pink / teal
   accents. Tokens are stored as bare "H S% L%" triples and consumed as
   hsl(var(--token)), so every existing v2 stylesheet that references
   --primary / --ring / etc. re-skins to the Up-4ever palette automatically.

   Brand-kit reference colors:
     primary purple  #8A49FD   deep purple #362563   gradient gold #FCC746
     magenta #C56BC7   pink #FF6692   teal #00CEB6   cyan #00A1FF
   ========================================================================== */

body.v2 {
  /* Surfaces (HSL components, used as hsl(var(--background))) */
  --background: 0 0% 100%;
  --foreground: 258 30% 12%;        /* near-black with a faint purple cast */

  --card: 0 0% 100%;
  --card-foreground: 258 30% 12%;

  --popover: 0 0% 100%;
  --popover-foreground: 258 30% 12%;

  --muted: 258 24% 96%;
  --muted-foreground: 258 8% 45%;

  --subtle: 258 30% 98%;

  --border: 258 22% 91%;
  --input: 258 22% 91%;
  --ring: 262 97% 64%;

  /* ---- Brand (Up-4ever purple) ------------------------------------------ */
  --primary: 262 97% 64%;           /* #8A49FD */
  --primary-hover: 262 70% 54%;
  --primary-foreground: 0 0% 100%;

  --brand: 262 97% 64%;             /* alias of --primary */
  --brand-deep: 256 46% 27%;        /* #362563 — gradient dark end / wordmark */
  --brand-gold: 43 97% 63%;         /* #FCC746 — gradient warm end / accents  */
  --brand-magenta: 299 45% 60%;     /* #C56BC7 — gradient mid                 */
  --brand-pink: 342 100% 70%;       /* #FF6692                                */
  --brand-teal: 173 100% 40%;       /* #00CEB6                                */
  --brand-cyan: 202 100% 50%;       /* #00A1FF                                */

  /* Signature brand gradient (logo mark / heroes / primary CTAs).
     Use as: background-image: var(--grad-brand); */
  --grad-brand: linear-gradient(135deg,
      hsl(262 90% 60%) 0%,
      hsl(305 60% 60%) 48%,
      hsl(43 97% 63%) 100%);
  --grad-brand-soft: linear-gradient(135deg,
      hsl(262 97% 64% / 0.12) 0%,
      hsl(43 97% 63% / 0.12) 100%);

  --secondary: 258 24% 96%;
  --secondary-foreground: 258 30% 12%;

  --accent: 258 24% 96%;
  --accent-foreground: 258 30% 12%;

  /* ---- Functional / semantic (kept distinct from brand for clarity) ----- */
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;

  --success: 152 69% 40%;
  --success-foreground: 0 0% 100%;

  --warning: 43 97% 55%;
  --warning-foreground: 258 30% 12%;

  --info: 202 100% 50%;
  --info-foreground: 0 0% 100%;

  /* Type scale */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Changa', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius:    0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* Shadows — tuned with a faint purple tint for brand cohesion */
  --shadow-xs: 0 1px 2px 0 hsl(258 40% 20% / 0.05);
  --shadow-sm: 0 1px 3px 0 hsl(258 40% 20% / 0.08), 0 1px 2px -1px hsl(258 40% 20% / 0.07);
  --shadow:    0 4px 6px -1px hsl(258 40% 20% / 0.09), 0 2px 4px -2px hsl(258 40% 20% / 0.07);
  --shadow-md: 0 10px 15px -3px hsl(258 40% 20% / 0.10), 0 4px 6px -4px hsl(258 40% 20% / 0.08);
  --shadow-lg: 0 20px 25px -5px hsl(258 40% 20% / 0.12), 0 8px 10px -6px hsl(258 40% 20% / 0.08);
  --shadow-brand: 0 10px 30px -8px hsl(262 90% 55% / 0.45);

  /* Container */
  --container-max: 1200px;
}

/* Dark mode mirror */
@media (prefers-color-scheme: dark) {
  body.v2 {
    --background: 258 30% 6%;
    --foreground: 0 0% 98%;

    --card: 258 28% 9%;
    --card-foreground: 0 0% 98%;

    --popover: 258 28% 9%;
    --popover-foreground: 0 0% 98%;

    --muted: 258 18% 16%;
    --muted-foreground: 258 10% 65%;

    --subtle: 258 24% 10%;

    --border: 258 18% 20%;
    --input: 258 18% 20%;
    --ring: 262 97% 68%;

    --primary: 262 97% 68%;
    --primary-hover: 262 90% 74%;
    --primary-foreground: 0 0% 100%;
    --brand: 262 97% 68%;

    --secondary: 258 18% 18%;
    --secondary-foreground: 0 0% 98%;

    --accent: 258 18% 18%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 63% 50%;
    --destructive-foreground: 0 0% 98%;

    --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
    --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.5), 0 1px 2px -1px hsl(0 0% 0% / 0.5);
    --shadow:    0 4px 6px -1px hsl(0 0% 0% / 0.6), 0 2px 4px -2px hsl(0 0% 0% / 0.4);
    --shadow-md: 0 10px 15px -3px hsl(0 0% 0% / 0.7), 0 4px 6px -4px hsl(0 0% 0% / 0.5);
    --shadow-lg: 0 20px 25px -5px hsl(0 0% 0% / 0.8), 0 8px 10px -6px hsl(0 0% 0% / 0.5);
    --shadow-brand: 0 10px 30px -8px hsl(262 90% 60% / 0.55);
  }
}