/*
 * recipes.css — named design decisions composed from raw tokens.
 *
 * Components consume recipes; themes override recipes. Recipes never
 * declare raw values directly — they reference --kohsanuk-* tokens
 * from tokens.css so a theme swap propagates through automatically.
 *
 * CRITICAL: recipes MUST be declared on `body`, NOT on `:root`. CSS
 * custom property substitution happens AT THE DECLARING ELEMENT. A
 * recipe like `--surface-card: var(--kohsanuk-surface)` declared at
 * `:root` resolves at `:root` using `:root`'s value of
 * `--kohsanuk-surface` (the default token), so theme overrides applied
 * via `body.site-theme--<key>` never feed into the recipes. Declaring
 * recipes on `body` makes them re-resolve var(--kohsanuk-*) using body's
 * value, which IS the theme-overridden value.
 */

body {
    /* Surface roles */
    --surface-page:                var(--kohsanuk-bg-page);
    --surface-card:                var(--kohsanuk-surface);
    --surface-card-selected:       var(--kohsanuk-cream-50);
    --surface-field:               var(--kohsanuk-cream-100);
    --surface-section:             var(--kohsanuk-cream-50);

    /* Border treatments */
    --border-card:                 1px solid var(--kohsanuk-border);
    --border-card-selected:        1.5px solid var(--kohsanuk-action);
    --border-extra-dashed:         1px dashed var(--kohsanuk-border-extra);
    --border-rule:                 1px solid var(--kohsanuk-rule);
    --border-accent-bar-width:     4px;
    --border-accent-bar-colour:    var(--kohsanuk-action);

    /* Shadow recipes */
    --shadow-card:                 var(--kohsanuk-shadow-soft);
    --shadow-card-hover:           var(--kohsanuk-shadow-card);
    --shadow-card-selected:        0 6px 18px var(--kohsanuk-action-shadow);
    --shadow-floating:             var(--kohsanuk-shadow-popup);

    /* Gradients — themes can flatten these to `none` */
    --gradient-card-selected:      none;       /* default flat; warm themes can set to linear-gradient(...) */
    --gradient-section:            none;

    /* Typography roles */
    --type-display-font:           var(--kohsanuk-font-sans);
    --type-body-font:              var(--kohsanuk-font-sans);
    --type-display-weight:         600;
    --type-display-letter-spacing: -0.01em;
    --type-eyebrow-letter-spacing: 0.12em;
    --type-eyebrow-weight:         700;
    --eyebrow-colour:              var(--kohsanuk-brand);

    /* Status palette */
    --status-paid-bg:              var(--kohsanuk-success-bg);
    --status-paid-text:            var(--kohsanuk-success-text);
    --status-unpaid-bg:            var(--kohsanuk-danger-bg);
    --status-unpaid-text:          var(--kohsanuk-danger-text);
    --status-hold-bg:              var(--kohsanuk-hold-bg);
    --status-hold-text:            var(--kohsanuk-hold-text);
    --status-neutral-bg:           var(--kohsanuk-neutral-bg);
    --status-neutral-text:         var(--kohsanuk-text-soft);

    /* Refund tiers */
    --refund-full:                 var(--kohsanuk-refund-full);
    --refund-half:                 var(--kohsanuk-refund-half);
    --refund-none:                 var(--kohsanuk-refund-none);

    /* Motion */
    --ease:                        var(--kohsanuk-ease);

    /* Buttons — defaults; themes can split brand vs. action (Driftwood does) */
    --button-primary-bg:           var(--kohsanuk-action);
    --button-primary-bg-hover:     var(--kohsanuk-action-dark);
    --button-primary-fg:           #ffffff;
    --button-outline-fg:           var(--kohsanuk-brand);
    --button-outline-border:       var(--kohsanuk-brand);
    --button-outline-bg-hover:     var(--kohsanuk-action-tint);
}