/* 4A Group — Color System
   Dark, luxury palette: near-black surfaces, warm off-white ink, a single gold accent.
   Channel tokens are stored as HSL components (matching the production codebase),
   wrapped with hsl() in semantic aliases below. */
:root {
  /* ---- Raw channels (H S% L%) ---- @kind color */
  --c-background: 0 0% 4%; /* @kind color */
  --c-foreground: 40 20% 90%; /* @kind color */
  --c-card: 0 0% 7%; /* @kind color */
  --c-popover: 0 0% 7%; /* @kind color */
  --c-secondary: 0 0% 12%; /* @kind color */
  --c-muted: 0 0% 14%; /* @kind color */
  --c-muted-foreground: 0 0% 55%; /* @kind color */
  --c-border: 0 0% 16%; /* @kind color */
  --c-input: 0 0% 16%; /* @kind color */

  --c-gold: 43 74% 49%; /* @kind color */
  --c-gold-light: 43 80% 65%; /* @kind color */
  --c-gold-dark: 43 60% 35%; /* @kind color */
  --c-destructive: 0 84% 60%; /* @kind color */

  /* Brand logo mark — the FOUR A CONCEPT triangle is rendered in this red. */
  --c-brand-red: 0 86% 47%; /* @kind color */

  /* ---- Resolved base colors ---- */
  --color-bg: hsl(var(--c-background));        /* #0A0A0A */
  --color-surface: hsl(var(--c-card));         /* #121212 */
  --color-surface-2: hsl(var(--c-secondary));  /* #1F1F1F */
  --color-surface-3: hsl(var(--c-muted));      /* #242424 */
  --color-ink: hsl(var(--c-foreground));       /* warm off-white */
  --color-ink-muted: hsl(var(--c-muted-foreground));
  --color-line: hsl(var(--c-border));

  --color-gold: hsl(var(--c-gold));            /* #D9A521 */
  --color-gold-light: hsl(var(--c-gold-light));
  --color-gold-dark: hsl(var(--c-gold-dark));
  --color-brand-red: hsl(var(--c-brand-red));  /* #DF1212 */
  --color-danger: hsl(var(--c-destructive));

  /* ---- Semantic aliases ---- */
  --surface-page: var(--color-bg);
  --surface-card: var(--color-surface);
  --surface-raised: var(--color-surface-2);
  --surface-input: var(--color-surface-2);

  --text-heading: var(--color-ink);
  --text-body: var(--color-ink);
  --text-muted: var(--color-ink-muted);
  --text-accent: var(--color-gold);
  --text-on-accent: hsl(var(--c-background));

  --accent: var(--color-gold);
  --accent-hover: var(--color-gold-light);
  --ring: var(--color-gold);

  --border-subtle: hsl(var(--c-border));
  --border-strong: hsl(0 0% 24%);
  --border-accent: hsl(var(--c-gold) / 0.3);

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); /* @kind color */
  --gradient-gold-text: linear-gradient(135deg, var(--color-gold-light), var(--color-gold), var(--color-gold-dark)); /* @kind color */
  --gradient-dark: linear-gradient(180deg, hsl(0 0% 4%), hsl(0 0% 8%)); /* @kind color */
  --gradient-section: linear-gradient(180deg, hsl(0 0% 6%), hsl(0 0% 4%)); /* @kind color */
}