/* TheraBee — color tokens. Source: Brand Guidelines 2026, p.21 (palette) + graphic-element PNG ramps (p.28). */
:root{
  /* Brand palette (exact values from guidelines) */
  --tb-honey:#f3b44f;      /* primary — logo hive, CTAs */
  --tb-charcoal:#3b3c3c;   /* primary ink, dark surfaces */
  --tb-teal:#005c75;
  --tb-forest:#2a7e60;
  --tb-rose:#be6871;
  --tb-linen:#ecece2;      /* page background */
  --tb-sky:#c9e5ec;
  --tb-blush:#f7e6e0;
  --tb-mint:#dceae6;
  --tb-silver:#cccccc;
  --tb-white:#ffffff;

  /* Graphic-element ramps (sampled from assets/shapes/hexagon-NN.png) */
  --tb-teal-900:#245970;--tb-teal-600:#327d9b;--tb-teal-300:#98c5d7;--tb-teal-100:#d4e5ec;
  --tb-green-900:#517b64;--tb-green-600:#6faa8c;--tb-green-300:#add7c2;--tb-green-100:#e3ece8;
  --tb-gold-600:#ffbd59;--tb-gold-300:#fcdba7;--tb-gold-100:#f7ebd8;--tb-gold-50:#eeeee6;
  --tb-rose-900:#aa6f73;--tb-rose-600:#eea990;--tb-rose-300:#f0cfc3;--tb-rose-100:#f4e9e4;

  /* Derived interaction shades (oklch-adjusted from honey/charcoal) */
  --tb-honey-hover:#e9a63c;
  --tb-honey-press:#d9962e;
  --tb-honey-tint:#faeedb;   /* honey @ ~20% on linen — typography-usage panel */
  --tb-charcoal-hover:#2c2d2d;
  --tb-charcoal-soft:#55575a;

  /* Semantic — surfaces */
  --surface-page:var(--tb-linen);
  --surface-card:var(--tb-white);
  --surface-card-dark:var(--tb-charcoal);
  --surface-sunken:#e2e2d6;
  --surface-tint:var(--tb-honey-tint);
  --surface-bubble:var(--tb-silver);   /* Ask Bea message bubble */
  --surface-overlay:rgba(59,60,60,.48);
  --surface-glass:rgba(255,255,255,.18);

  /* Semantic — text */
  --text-strong:var(--tb-charcoal);
  --text-body:var(--tb-charcoal);
  --text-muted:#6b6c6a;
  --text-subtle:#8d8e8a;
  --text-inverse:var(--tb-white);
  --text-accent:var(--tb-honey);
  --text-on-accent:var(--tb-charcoal);
  --text-link:var(--tb-teal);

  /* Semantic — borders */
  --border-subtle:#d9d9cd;
  --border-default:var(--tb-silver);
  --border-strong:var(--tb-charcoal);
  --border-accent:var(--tb-honey);
  --focus-ring:var(--tb-teal);

  /* Semantic — actions */
  --action-primary:var(--tb-honey);
  --action-primary-hover:var(--tb-honey-hover);
  --action-primary-press:var(--tb-honey-press);
  --action-secondary:var(--tb-charcoal);
  --action-secondary-hover:var(--tb-charcoal-hover);

  /* Semantic — status (mapped to brand hues) */
  --status-success:var(--tb-forest);--status-success-bg:var(--tb-mint);
  --status-info:var(--tb-teal);--status-info-bg:var(--tb-sky);
  --status-warning:#a8701a;--status-warning-bg:var(--tb-gold-100);
  --status-danger:var(--tb-rose);--status-danger-bg:var(--tb-blush);
}