/* ============================================================
   V-Choux colors
   Source of truth: web-frontend/app/globals.css + tailwind.config.ts
   The product declares colors as bare HSL triplets and consumes them
   as hsl(var(--token)). That convention is preserved verbatim below,
   with ready-to-use --color-* aliases added for plain HTML/CSS authors.
   Default theme is DARK. html.light flips the neutrals.
   ============================================================ */
:root{
  /* --- brand marks --- */
  --brand-ink:#101828;              /* V-Choux dark blue, logotype on light */
  --brand-white:#ffffff;

  /* --- character accents (the palette picker in the Hub header) --- */
  --char-choux:#ffffff;      --char-choux-2:#d9d9e2;
  --char-maxine:#88beff;     --char-maxine-2:#5fa0f2;
  --char-lucretia:#faabd2;   --char-lucretia-2:#f285bb;
  --char-hiroshi:#78e1cb;    --char-hiroshi-2:#4fc9b0;

  /* --- neutral ramp (dark surface stack, hue 240 10%) --- */
  --n-0:hsl(0 0% 0%);        /* page */
  --n-6:hsl(240 10% 6%);     /* academy canvas */
  --n-8:hsl(240 10% 8%);     /* card / inset well */
  --n-10:hsl(240 10% 10%);   /* academy panel */
  --n-12:hsl(240 10% 12%);   /* card hover / sidebar / popover */
  --n-13:hsl(240 10% 13%);   /* academy tile */
  --n-14:hsl(240 10% 14%);   /* control */
  --n-16:hsl(240 10% 16%);   /* secondary / muted / input */
  --n-20:hsl(240 10% 20%);   /* border */
  --n-22:hsl(240 10% 22%);   /* border, academy */
  --n-24:hsl(240 10% 24%);   /* border, control */
  --n-26:hsl(240 10% 26%);   /* border, hover */
  --n-32:hsl(240 10% 32%);

  /* --- shadcn token layer, bare triplets (product convention) --- */
  --background:0 0% 0%; /* @kind other */
  --foreground:0 0% 100%; /* @kind other */
  --card:240 10% 8%; /* @kind other */
  --card-foreground:0 0% 100%; /* @kind other */
  --card-hover:240 10% 12%; /* @kind other */
  --popover:240 10% 12%; /* @kind other */
  --popover-foreground:0 0% 100%; /* @kind other */
  --secondary:240 10% 16%; /* @kind other */
  --secondary-foreground:0 0% 100%; /* @kind other */
  --secondary-hover:240 10% 20%; /* @kind other */
  --muted:240 10% 16%; /* @kind other */
  --muted-foreground:0 0% 70%; /* @kind other */
  --border:240 10% 20%; /* @kind other */
  --input:240 10% 16%; /* @kind other */
  --ring:0 0% 100%; /* @kind other */
  --sidebar:240 10% 12%; /* @kind other */
  --sidebar-foreground:0 0% 100%; /* @kind other */
  --sidebar-accent:240 10% 15%; /* @kind other */
  --sidebar-accent-foreground:0 0% 100%; /* @kind other */
  --sidebar-border:240 9% 20%; /* @kind other */
  --primary:0 0% 100%; /* @kind other */
  --primary-foreground:0 0% 0%; /* @kind other */
  --primary-hover:0 0% 90%; /* @kind other */
  --sidebar-primary:0 0% 100%; /* @kind other */
  --sidebar-primary-foreground:0 0% 0%; /* @kind other */
  --sidebar-ring:0 0% 100%; /* @kind other */
  --success:142 71% 45%; /* @kind other */
  --success-foreground:0 0% 100%; /* @kind other */
  --warning:48 96% 53%; /* @kind other */
  --warning-foreground:0 0% 100%; /* @kind other */
  --destructive:0 84% 60%; /* @kind other */
  --destructive-foreground:0 0% 100%; /* @kind other */
  --discord:235 85% 64%; /* @kind other */
  --youtube:0 100% 50%; /* @kind other */

  /* --- resolved aliases for plain HTML authoring --- */
  --color-bg:hsl(var(--background));
  --color-fg:hsl(var(--foreground));
  --color-surface:hsl(var(--card));
  --color-surface-hover:hsl(var(--card-hover));
  --color-surface-raised:hsl(var(--popover));
  --color-border:hsl(var(--border));
  --color-muted:hsl(var(--muted));
  --color-muted-fg:hsl(var(--muted-foreground));
  --color-primary:hsl(var(--primary));
  --color-primary-fg:hsl(var(--primary-foreground));
  --color-primary-hover:hsl(var(--primary-hover));
  --color-secondary:hsl(var(--secondary));
  --color-secondary-hover:hsl(var(--secondary-hover));
  --color-success:hsl(var(--success));
  --color-warning:hsl(var(--warning));
  --color-destructive:hsl(var(--destructive));
  --color-ring:hsl(var(--ring));

  /* --- platform brand colors used in social / auth buttons --- */
  --color-discord:hsl(var(--discord));   /* #5865F2 in raw SVG marks */
  --color-youtube:hsl(var(--youtube));
  --color-twitch:#9146FF;
  --color-google-blue:#4285F4;
  --color-google-green:#34A853;
  --color-google-yellow:#FBBC05;
  --color-google-red:#EA4335;

  /* --- gradients: always 135deg, accent -> accent-2 --- */
  --gradient-primary:linear-gradient(135deg,hsl(0 0% 100%) 0%,hsl(0 0% 90%) 100%); /* @kind color */
  --gradient-secondary:linear-gradient(135deg,hsl(217 91% 60%) 0%,hsl(212 95% 68%) 100%); /* @kind color */
  --gradient-success:linear-gradient(135deg,hsl(142 71% 45%) 0%,hsl(160 70% 50%) 100%); /* @kind color */
  --gradient-warning:linear-gradient(135deg,hsl(48 96% 53%) 0%,hsl(38 92% 50%) 100%); /* @kind color */
  --gradient-destructive:linear-gradient(135deg,hsl(0 84% 60%) 0%,hsl(348 83% 47%) 100%); /* @kind color */
  --gradient-maxine:linear-gradient(135deg,#88beff 0%,#5fa0f2 100%); /* @kind color */
  --gradient-lucretia:linear-gradient(135deg,#faabd2 0%,#f285bb 100%); /* @kind color */
  --gradient-hiroshi:linear-gradient(135deg,#78e1cb 0%,#4fc9b0 100%); /* @kind color */
}

/* Light theme: neutrals invert, primary becomes black. Accents are unchanged. */
html.light{
  --background:0 0% 100%; /* @kind other */
  --foreground:0 0% 0%; /* @kind other */
  --card:0 0% 95%; /* @kind other */
  --card-foreground:0 0% 0%; /* @kind other */
  --card-hover:0 0% 90%; /* @kind other */
  --popover:0 0% 95%; /* @kind other */
  --popover-foreground:0 0% 0%; /* @kind other */
  --secondary:0 0% 90%; /* @kind other */
  --secondary-foreground:0 0% 0%; /* @kind other */
  --secondary-hover:0 0% 85%; /* @kind other */
  --muted:0 0% 90%; /* @kind other */
  --muted-foreground:0 0% 30%; /* @kind other */
  --border:0 0% 80%; /* @kind other */
  --input:0 0% 90%; /* @kind other */
  --ring:0 0% 0%; /* @kind other */
  --primary:0 0% 0%; /* @kind other */
  --primary-foreground:0 0% 100%; /* @kind other */
  --primary-hover:0 0% 10%; /* @kind other */
  --gradient-primary:linear-gradient(135deg,hsl(0 0% 0%) 0%,hsl(0 0% 10%) 100%); /* @kind color */
  --sidebar:0 0% 95%; /* @kind other */
  --sidebar-foreground:0 0% 0%; /* @kind other */
  --sidebar-accent:0 0% 90%; /* @kind other */
  --sidebar-accent-foreground:0 0% 0%; /* @kind other */
  --sidebar-border:0 0% 80%; /* @kind other */
  --sidebar-primary:0 0% 0%; /* @kind other */
  --sidebar-primary-foreground:0 0% 100%; /* @kind other */
  --sidebar-ring:0 0% 0%; /* @kind other */
}

/* Character accent themes. Applied as an attribute on <html>; they only
   override --primary and its companions, never the neutral stack. */
html[data-color-theme="maxine"]{
  --primary:213 100% 77%; /* @kind other */--primary-foreground:240 10% 8%; /* @kind other */--primary-hover:213 85% 66%; /* @kind other */
  --gradient-primary:linear-gradient(135deg,hsl(213 100% 77%) 0%,hsl(213 85% 66%) 100%); /* @kind color */
  --ring:213 100% 77%; /* @kind other */--sidebar-primary:213 100% 77%; /* @kind other */--sidebar-primary-foreground:240 10% 8%; /* @kind other */--sidebar-ring:213 100% 77%; /* @kind other */
}
html[data-color-theme="lucretia"]{
  --primary:330 89% 83%; /* @kind other */--primary-foreground:240 10% 8%; /* @kind other */--primary-hover:330 81% 74%; /* @kind other */
  --gradient-primary:linear-gradient(135deg,hsl(330 89% 83%) 0%,hsl(330 81% 74%) 100%); /* @kind color */
  --ring:330 89% 83%; /* @kind other */--sidebar-primary:330 89% 83%; /* @kind other */--sidebar-primary-foreground:240 10% 8%; /* @kind other */--sidebar-ring:330 89% 83%; /* @kind other */
}
html[data-color-theme="hiroshi"]{
  --primary:167 64% 68%; /* @kind other */--primary-foreground:240 10% 8%; /* @kind other */--primary-hover:168 53% 55%; /* @kind other */
  --gradient-primary:linear-gradient(135deg,hsl(167 64% 68%) 0%,hsl(168 53% 55%) 100%); /* @kind color */
  --ring:167 64% 68%; /* @kind other */--sidebar-primary:167 64% 68%; /* @kind other */--sidebar-primary-foreground:240 10% 8%; /* @kind other */--sidebar-ring:167 64% 68%; /* @kind other */
}