/* ============================================================================
   Feanix Biotechnology — SEMANTIC ROLE TOKENS  (the design-role layer)
   ----------------------------------------------------------------------------
   Components reference ROLES (--surface-page, --text-primary, --accent), never
   raw brand values. Each role ALIASES a brand primitive from variables.css.
   Swap the primitives → new brand; the role names stay stable. This is the
   token CONTRACT every artifact, the ShadCN app, and token-map map against.

   Rule of the layer: section contrast comes from the SURFACE LADDER + the one
   accent, NOT from new hues. No color outside the brand's own neutrals/tints.
   ============================================================================ */
:root {
  /* ── SURFACES — the section-rhythm ladder (4 moods, zero new hues) ──────── */
  --surface-page:         var(--brand-color-bg-container, #fbf8f2);   /* cream canvas — default */
  --surface-raised:       #ffffff;                                    /* cards / content blocks */
  --surface-sunken:       var(--brand-color-fill-tertiary, #f3f0ea);  /* alternating band (deeper cream) */
  --surface-inverse:      var(--brand-color-text, #3d3730);           /* dark feature band */
  --surface-inverse-deep: #14110d;                                    /* near-black brown, high-drama band */

  /* ── TEXT ──────────────────────────────────────────────────────────────── */
  --text-primary:    var(--brand-color-text, #3d3730);           /* body + headings */
  --text-secondary:  var(--brand-color-text-secondary, #807b74); /* secondary body (passes contrast) */
  --text-muted:      var(--brand-color-text-tertiary, #a6a19b);  /* LABELS ONLY — too light for body (a11y) */
  --text-on-inverse: #fbf8f2;                                    /* cream text on dark bands */
  --text-on-accent:  #ffffff;                                    /* white text on crimson */

  /* ── LINES ─────────────────────────────────────────────────────────────── */
  --border:  var(--brand-color-border, #d8d0c8);            /* hairlines / card edges */
  --divider: var(--brand-color-border-secondary, #f0ece6);  /* faint section rules */

  /* ── ACCENT — crimson. Use ≤2 per screen. Never a full-section wash. ────── */
  --accent:           var(--brand-color-primary, #c8252c);
  --accent-hover:     var(--brand-color-primary-hover, #d44a4b);
  --accent-quiet:     var(--brand-color-primary-bg, #fff2f0);  /* faint crimson tint for chips/callouts */
  --accent-secondary: #14110d;                                 /* near-black brown — heading emphasis */

  /* ── FUNCTIONAL — status ONLY, never decoration (corrected, on-brand) ───── */
  --success: #4f7a3f;   /* muted natural green */
  --warning: #c08422;   /* warm amber */
  --danger:  #c8252c;   /* = brand crimson */

  /* ── DATA-VIZ — categorical chart ramp, all brand-derived ──────────────── */
  --chart-1: #c8252c;  /* crimson    */
  --chart-2: #3d3730;  /* dark brown */
  --chart-3: #4f7a3f;  /* green      */
  --chart-4: #c08422;  /* amber      */
  --chart-5: #8c8078;  /* warm gray  */

  /* ── SHAPE ─────────────────────────────────────────────────────────────── */
  --radius: 8px;
  --border-width: 1px;
}

/* ── SECTION BANDS — apply one per <section> to build vertical rhythm ─────────
   Alternate page → sunken → raised, drop an inverse band once or twice per page
   for the "dark feature callout". That IS the contrast — no extra colors. */
.section          { background: var(--surface-page);         color: var(--text-primary); }
.section--raised  { background: var(--surface-raised);       color: var(--text-primary); }
.section--sunken  { background: var(--surface-sunken);       color: var(--text-primary); }
.section--inverse { background: var(--surface-inverse);      color: var(--text-on-inverse); }
.section--inverse-deep { background: var(--surface-inverse-deep); color: var(--text-on-inverse); }
/* On inverse bands the accent still reads: crimson on dark is high-signal. */
.section--inverse .accent, .section--inverse-deep .accent { color: var(--accent); }

/* ============================================================================
   ShadCN crosswalk (the token-map target — one file, both worlds):
     --background      = --surface-page        --card / --popover = --surface-raised
     --foreground      = --text-primary        --muted-foreground = --text-secondary
     --border/--input  = --border              --primary/--ring   = --accent
     --primary-foreground = --text-on-accent   --destructive      = --danger
     --chart-1..5      = --chart-1..5           --radius           = --radius
   ============================================================================ */