/* ==========================================================================
   theme.css — Single source of truth for the "Warm Embrace" colour palette.

   This is the ONLY file where colour values are defined. Everything else
   (tailwind.config.js, style.css, the per-feature CSS files, templates) refers
   to these tokens via var(--token). To re-colour the site, change the channel
   values below once — the change propagates to Tailwind utilities, all CSS, and
   templates automatically.

   Tokens are stored as space-separated RGB channels (e.g. "196 98 45") so that
   Tailwind opacity modifiers (e.g. amber-900/20) and rgb(... / alpha) keep
   working. Each channel token has a ready-to-use full-colour alias for plain
   CSS (e.g. var(--amber-500)).

   NOTE: HTML email templates (e.g. referrals/email/invitation_body.html) cannot
   use these variables — email clients do not support CSS custom properties.
   Those colours are hardcoded and must be updated by hand to match this file.
   ========================================================================== */

:root {
    /* ----- Brand: cream ramp (hero --amber-200 #F1E2C6) -----
       Re-anchored from terracotta to cream. The brand colour now lives on
       FILLS, BORDERS and BACKGROUNDS only — text/icons on brand surfaces use
       --on-brand (#333333). The dark end is a muted bronze (no longer used for
       body text, which is now grey via the --gray ramp / --text-* tokens). */
    --amber-50-c:  251 247 239;  --amber-50:  rgb(var(--amber-50-c));
    --amber-100-c: 247 240 224;  --amber-100: rgb(var(--amber-100-c));
    --amber-200-c: 241 226 198;  --amber-200: rgb(var(--amber-200-c));  /* #F1E2C6 hero brand fill */
    --amber-300-c: 232 211 171;  --amber-300: rgb(var(--amber-300-c));
    --amber-400-c: 220 192 138;  --amber-400: rgb(var(--amber-400-c));
    --amber-500-c: 205 171 110;  --amber-500: rgb(var(--amber-500-c));
    --amber-600-c: 184 146 79;   --amber-600: rgb(var(--amber-600-c));
    --amber-700-c: 156 120 56;   --amber-700: rgb(var(--amber-700-c));
    --amber-800-c: 125 95 42;    --amber-800: rgb(var(--amber-800-c));
    --amber-900-c: 92 69 29;     --amber-900: rgb(var(--amber-900-c));

    /* ----- Neutral greys (body & heading text) ----- */
    --gray-50-c:  246 246 246;   --gray-50:  rgb(var(--gray-50-c));
    --gray-100-c: 236 236 236;   --gray-100: rgb(var(--gray-100-c));
    --gray-200-c: 220 220 220;   --gray-200: rgb(var(--gray-200-c));
    --gray-300-c: 196 196 196;   --gray-300: rgb(var(--gray-300-c));
    --gray-400-c: 158 158 158;   --gray-400: rgb(var(--gray-400-c));
    --gray-500-c: 117 117 117;   --gray-500: rgb(var(--gray-500-c));
    --gray-600-c: 86 86 86;      --gray-600: rgb(var(--gray-600-c));
    --gray-700-c: 74 74 74;      --gray-700: rgb(var(--gray-700-c));
    --gray-800-c: 61 61 61;      --gray-800: rgb(var(--gray-800-c));
    --gray-900-c: 51 51 51;      --gray-900: rgb(var(--gray-900-c));  /* #333333 primary text */

    /* ----- Neutrals: warm cream/sand stone ramp ----- */
    --stone-50-c:  250 243 231;  --stone-50:  rgb(var(--stone-50-c));
    --stone-100-c: 245 234 216;  --stone-100: rgb(var(--stone-100-c));
    --stone-200-c: 234 216 196;  --stone-200: rgb(var(--stone-200-c));
    --stone-300-c: 219 196 172;  --stone-300: rgb(var(--stone-300-c));
    --stone-400-c: 200 176 154;  --stone-400: rgb(var(--stone-400-c));
    --stone-500-c: 168 144 124;  --stone-500: rgb(var(--stone-500-c));
    --stone-600-c: 138 112 96;   --stone-600: rgb(var(--stone-600-c));
    --stone-700-c: 92 74 62;     --stone-700: rgb(var(--stone-700-c));
    --stone-800-c: 67 52 43;     --stone-800: rgb(var(--stone-800-c));
    --stone-900-c: 61 43 31;     --stone-900: rgb(var(--stone-900-c));

    /* ----- Secondary accent: sage / forest green ----- */
    --sage-50-c:  234 242 234;   --sage-50:  rgb(var(--sage-50-c));
    --sage-100-c: 232 242 233;   --sage-100: rgb(var(--sage-100-c));
    --sage-200-c: 201 224 203;   --sage-200: rgb(var(--sage-200-c));
    --sage-400-c: 122 158 126;   --sage-400: rgb(var(--sage-400-c));
    --sage-500-c: 93 125 97;     --sage-500: rgb(var(--sage-500-c));
    --sage-600-c: 45 90 48;      --sage-600: rgb(var(--sage-600-c));
    --sage-700-c: 35 74 38;      --sage-700: rgb(var(--sage-700-c));

    /* ----- Surfaces ----- */
    --card-c:  255 250 244;      --card:  rgb(var(--card-c));   /* warm card surface */
    --white-c: 255 255 255;      --white: rgb(var(--white-c));  /* genuine pure white */

    /* ----- Status colours (kept conventional — only tokenised) ----- */
    /* Success */
    --success-c:     21 128 61;   --success:     rgb(var(--success-c));     /* accent green */
    --success-bg-c:  212 237 218; --success-bg:  rgb(var(--success-bg-c));
    --success-fg-c:  21 87 36;    --success-fg:  rgb(var(--success-fg-c));
    --success-soft-c: 220 252 231; --success-soft: rgb(var(--success-soft-c)); /* light badge bg */
    /* Danger */
    --danger-c:      192 57 43;   --danger:      rgb(var(--danger-c));       /* #c0392b */
    --danger-strong-c: 220 38 38; --danger-strong: rgb(var(--danger-strong-c)); /* #dc2626 */
    --danger-bg-c:   248 215 218; --danger-bg:   rgb(var(--danger-bg-c));
    --danger-fg-c:   114 28 36;   --danger-fg:   rgb(var(--danger-fg-c));
    /* Info */
    --info-bg-c:     209 236 241; --info-bg:     rgb(var(--info-bg-c));
    --info-fg-c:     12 84 96;    --info-fg:     rgb(var(--info-fg-c));
    /* Warning */
    --warning-bg-c:  255 243 205; --warning-bg:  rgb(var(--warning-bg-c));
    --warning-fg-c:  133 100 4;   --warning-fg:  rgb(var(--warning-fg-c));

    /* ----- Categorical accents (search result type badges) ----- */
    --cat-pink-fg-c:   157 23 77;  --cat-pink-fg:   rgb(var(--cat-pink-fg-c));   /* #9d174d */
    --cat-pink-bg-c:   253 242 248; --cat-pink-bg:  rgb(var(--cat-pink-bg-c));   /* #fdf2f8 */
    --cat-indigo-fg-c: 55 48 163;  --cat-indigo-fg: rgb(var(--cat-indigo-fg-c)); /* #3730a3 */
    --cat-indigo-bg-c: 238 242 255; --cat-indigo-bg: rgb(var(--cat-indigo-bg-c)); /* #eef2ff */
    --cat-green-fg-c:  6 95 70;    --cat-green-fg:  rgb(var(--cat-green-fg-c));  /* #065f46 */
    --cat-green-bg-c:  236 253 245; --cat-green-bg: rgb(var(--cat-green-bg-c));  /* #ecfdf5 */

    /* ======================================================================
       Semantic brand & text aliases.
       Brand fills are cream; text/icons on them use --on-brand. Body text is
       grey. Legacy --brown-* aliases now point at the cream fill family so any
       stray *fill* reference degrades to cream.
       ====================================================================== */
    --brand-fill:        var(--amber-200);   /* #F1E2C6 cream — decorative/surface fills & avatars */
    --brand-fill-hover:  var(--amber-300);
    --brand-border:      var(--amber-400);
    --on-brand:          var(--gray-900);    /* #333333 text/icons on cream */

    /* Strong primary-action fill. Cream (--brand-fill) is invisible against the
       cream/white page, so solid CTAs use this bronze with white text.
       Anchored on amber-800 (#7D5F2A): white-on-amber-800 is ~5.9:1 (passes AA
       for small text); amber-700 was only ~4.07:1 (below the 4.5:1 threshold). */
    --brand-action:       var(--amber-800);
    --brand-action-hover: var(--amber-900);

    --brown-primary:      var(--brand-fill);
    --brown-hover:        var(--brand-fill-hover);
    --brown-light:        var(--amber-100);
    --gold-gradient-start: var(--amber-200);
    --gold-gradient-end:  var(--amber-400);

    --bg-light:  var(--stone-50);
    --bg-white:  var(--card);

    --text-dark:   var(--gray-900);
    --text-medium: var(--gray-600);
    --text-light:  var(--gray-400);

    /* In-text link colour. Bronze, distinct in hue from charcoal body text.
       Anchored on amber-800 (#7D5F2A): as text on the cream/white surfaces it is
       ~5.4–5.9:1 (passes AA); amber-700 was only ~3.7–4.1:1. Pair with an
       underline for inline links so colour is never the sole cue (WCAG 1.4.1). */
    --link: var(--amber-800);

    --sage:            var(--sage-50);
    --sage-foreground: var(--sage-600);

    --border-light: rgb(var(--amber-500-c) / 0.15);
    --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
}