/**
 * components.css — brand layer (v2: colorful)
 *
 * Saturated palette: deep teal primary, terracotta secondary, bright gold
 * accent. Stronger body gradients. Surfaces gently warm-tinted in light,
 * cool-tinted in dark.
 *
 * Revert to v1 (restrained editorial defaults):
 *   cp theme/roiban-tw/assets/css/components.css.v1.bak \
 *      theme/roiban-tw/assets/css/components.css
 *   ./ops/deploy.sh
 */

/* Section 1: DaisyUI HSL token overrides */

[data-theme="light"] {
  /* Primary — saturated deep teal-blue */
  --p:  195 78% 38%;
  --pc: 0 0% 100%;

  /* Secondary — terracotta / rust (warm complement to teal) */
  --s:  14 72% 48%;
  --sc: 0 0% 100%;

  /* Accent — bright gold (still readable on light bg) */
  --a:  40 92% 50%;
  --ac: 220 18% 12%;

  /* Neutral */
  --n:  220 18% 22%;
  --nc: 30 30% 98%;

  /* Base surfaces — slightly warmer than v1 */
  --b1: 36 35% 96%;
  --b2: 34 28% 92%;
  --b3: 32 22% 87%;
  --bc: 220 18% 16%;

  /* Status */
  --in: 200 92% 46%;
  --su: 142 72% 38%;
  --wa: 38 95% 50%;
  --er: 358 78% 52%;
}

[data-theme="dark"] {
  /* Lifted lightness for dark base */
  --p:  195 70% 60%;
  --pc: 220 18% 10%;

  --s:  14 75% 62%;
  --sc: 220 18% 12%;

  --a:  40 90% 62%;
  --ac: 220 18% 10%;

  --n:  220 12% 78%;
  --nc: 220 18% 12%;

  --b1: 220 22% 9%;
  --b2: 220 22% 13%;
  --b3: 220 22% 18%;
  --bc: 30 30% 96%;

  --in: 200 90% 65%;
  --su: 142 65% 58%;
  --wa: 40 92% 62%;
  --er: 358 80% 68%;
}

/* Section 2: Brand-named tokens for hand-CSS components */

[data-theme="light"] {
  --paper:       36 35% 96%;     /* warm off-white page bg */
  --ink:         220 22% 14%;    /* primary text */
  --accent:      40 92% 50%;     /* CTA/highlight; matches --a */
  --surface:     34 28% 93%;     /* cards */
  --surface-alt: 32 22% 88%;     /* alternate surface */
  --line:        30 18% 82%;     /* borders */
}

[data-theme="dark"] {
  --paper:       220 22% 9%;
  --ink:         30 30% 95%;
  --accent:      40 90% 62%;
  --surface:     220 22% 13%;
  --surface-alt: 220 22% 17%;
  --line:        220 18% 26%;
}

/* No :root fallback — see F3.4 in ops/failure-modes.md. Header.php hard-
   codes data-theme="dark" so [data-theme="dark"] always applies on first
   paint. */

/* Section 3: Body — uses brand tokens (NOT Tailwind utilities, per R22) */

body {
  background-color: hsl(var(--paper));
  color:            hsl(var(--ink));
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* More vivid editorial gradients than v1 — gold at top-right, teal at
     bottom-left, terracotta at center. Tuned for visibility without noise. */
  background-image:
    radial-gradient(ellipse 55% 65% at 100% 0%,   rgba(245, 188, 58, 0.22), transparent 60%),
    radial-gradient(ellipse 65% 55% at 0% 100%,   rgba(38, 130, 180, 0.18), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 130%,  rgba(200, 88, 58, 0.14),  transparent 70%);
  background-attachment: fixed, fixed, fixed;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 55% 65% at 100% 0%,   rgba(245, 188, 58, 0.18), transparent 60%),
    radial-gradient(ellipse 65% 55% at 0% 100%,   rgba(70, 160, 220, 0.18), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 130%,  rgba(220, 110, 80, 0.14), transparent 70%);
}

/* Section 4: DaisyUI primitive corrections */

.input,
.select,
.textarea {
  border-radius: 0.5rem;
}

.checkbox,
.radio {
  border-radius: 0.25rem;
}

a {
  color: hsl(var(--p));
  transition: color 0.15s ease;
}

a:hover {
  color: hsl(var(--a));
}

/* Section 5: Card tints — pair card backgrounds with their badge color
   for a subtle but unmistakable "this card is about X" cue. Keeps text
   on hsl(var(--ink)) for legibility. */

.card.tint-primary   { background: linear-gradient(135deg, hsl(var(--p) / 0.22), hsl(var(--surface))) !important; border-color: hsl(var(--p) / 0.45) !important; }
.card.tint-secondary { background: linear-gradient(135deg, hsl(var(--s) / 0.22), hsl(var(--surface))) !important; border-color: hsl(var(--s) / 0.45) !important; }
.card.tint-accent    { background: linear-gradient(135deg, hsl(var(--a) / 0.25), hsl(var(--surface))) !important; border-color: hsl(var(--a) / 0.50) !important; }
.card.tint-info      { background: linear-gradient(135deg, hsl(var(--in) / 0.22), hsl(var(--surface))) !important; border-color: hsl(var(--in) / 0.45) !important; }