/*
 * tokens.css — raw design tokens (palette, type stack, radii, motion).
 *
 * This file owns the canonical --kohsanuk-* token set and the legacy
 * back-compat aliases (--tc-* / --cp-* / --st-* / --w2-*). Recipes,
 * components, and themes all build on top of these values — nothing
 * else in the theme tree declares raw colours, fonts, or radii.
 *
 * Loaded first via theme.css (the Phase-3 manifest).
 */

:root {
    /* Surface & structure */
    --kohsanuk-bg-page:        #fafafa;
    --kohsanuk-surface:        #ffffff;
    --kohsanuk-cream-50:       #fdfaf4;
    --kohsanuk-cream-100:      #fbf8f2;
    --kohsanuk-cream-200:      #f4f1ea;
    --kohsanuk-cream-300:      #efe6d2;

    /* Borders */
    --kohsanuk-border:         #e5e5e5;
    --kohsanuk-border-subtle:  #dddddd;
    --kohsanuk-rule:           #ece6d8;
    --kohsanuk-border-accent-soft: #e8d8c5;
    --kohsanuk-border-extra:   #e0c9b0;

    /* Brand accent + states */
    --kohsanuk-accent:         #c97a3c;
    --kohsanuk-accent-dark:    #b46a31;
    --kohsanuk-accent-tint:    rgba(201, 122, 60, 0.10);
    --kohsanuk-accent-soft:    rgba(201, 122, 60, 0.18);
    --kohsanuk-accent-shadow:  rgba(201, 122, 60, 0.16);

    /* Text hierarchy */
    --kohsanuk-text:           #2c2620;
    --kohsanuk-text-soft:      #5b5246;
    --kohsanuk-text-muted:     #999988;

    /* Status (paid / unpaid / hold / etc.) */
    --kohsanuk-success:        #4CAF50;
    --kohsanuk-success-bg:     #d8efd8;
    --kohsanuk-success-text:   #2b6a2b;
    --kohsanuk-danger-bg:      #fde6e0;
    --kohsanuk-danger-text:    #9c3a18;
    --kohsanuk-hold-bg:        #fcefca;
    --kohsanuk-hold-text:      #8a5d12;
    --kohsanuk-neutral-bg:     #f1ece3;

    /* Refund tiers — used in the booking-terms cancellation timeline */
    --kohsanuk-refund-full:    #cfead4;
    --kohsanuk-refund-half:    #f3e3c5;
    --kohsanuk-refund-none:    #e3d1cd;

    /* Typography */
    --kohsanuk-font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --kohsanuk-font-serif:     Georgia, "Times New Roman", serif;

    /* Radii */
    --kohsanuk-radius-sm:      4px;
    --kohsanuk-radius-md:      6px;
    --kohsanuk-radius-lg:      8px;
    --kohsanuk-radius-xl:      12px;
    --kohsanuk-radius-pill:    999px;

    /* Shadows */
    --kohsanuk-shadow-soft:    0 2px 6px rgba(60, 40, 20, 0.06);
    --kohsanuk-shadow-card:    0 4px 14px rgba(0, 0, 0, 0.04);
    --kohsanuk-shadow-pop:     0 6px 18px var(--kohsanuk-accent-shadow);
    --kohsanuk-shadow-popup:   0 8px 28px rgba(0, 0, 0, 0.12);

    /* Motion */
    --kohsanuk-ease:           0.15s ease;

    /* NEW — two-tone brand model */
    --kohsanuk-brand:           var(--kohsanuk-accent);         /* default: brand = accent */
    --kohsanuk-brand-dark:      var(--kohsanuk-accent-dark);    /* hover/pressed state of the brand colour */
    --kohsanuk-brand-soft:      var(--kohsanuk-accent-soft);
    --kohsanuk-brand-tint:      var(--kohsanuk-accent-tint);
    --kohsanuk-action:          var(--kohsanuk-accent);         /* default: action = accent (single-tone) */
    --kohsanuk-action-dark:     var(--kohsanuk-accent-dark);
    --kohsanuk-action-soft:     var(--kohsanuk-accent-soft);
    --kohsanuk-action-tint:     var(--kohsanuk-accent-tint);
    --kohsanuk-action-shadow:   var(--kohsanuk-accent-shadow);
}

/* ─── Back-compat aliases ──────────────────────────────────────────────────
   Every prefixed variable that the older per-page stylesheets declared in
   their own :root block now resolves to the canonical --kohsanuk-* token.

   CRITICAL: aliases MUST be declared on `body`, NOT on `:root`. CSS custom
   property substitution happens AT THE DECLARING ELEMENT, so an alias like
   `--tc-accent: var(--kohsanuk-accent)` declared at `:root` would resolve
   to :root's value of `--kohsanuk-accent` and inherit that literal value
   to descendants — bypassing any body-level theme override (the themes
   apply via `body.site-theme--<key>` selectors). Declaring the aliases on
   `body` makes them re-resolve var(--kohsanuk-*) using body's value, which
   IS the theme-overridden value.
*/
body {
    /* ── tour-content.css aliases (--tc-*) ─────────────────────────────── */
    --tc-text:           var(--kohsanuk-text);
    --tc-text-soft:      var(--kohsanuk-text-soft);
    --tc-text-muted:     var(--kohsanuk-text-muted);
    --tc-accent:         var(--kohsanuk-accent);
    --tc-accent-deep:    var(--kohsanuk-accent-dark); /* was #a86430 in source — now using --kohsanuk-accent-dark (#b46a31) */
    --tc-accent-soft:    var(--kohsanuk-accent-soft);
    --tc-muted-red:      #b85f56; /* legacy, not yet promoted */
    --tc-cream-50:       var(--kohsanuk-cream-50);
    --tc-cream-100:      var(--kohsanuk-cream-100);
    --tc-cream-200:      var(--kohsanuk-cream-200);
    --tc-cream-300:      var(--kohsanuk-cream-300);
    --tc-rule:           var(--kohsanuk-rule);
    --tc-card-shadow:    var(--kohsanuk-shadow-soft);
    --tc-radius-sm:      var(--kohsanuk-radius-sm);
    --tc-radius-md:      var(--kohsanuk-radius-md);
    --tc-radius-lg:      var(--kohsanuk-radius-lg);

    /* ── category-pages.css aliases (--cp-*) ───────────────────────────── */
    --cp-terracotta:     var(--kohsanuk-accent);
    --cp-cream-1:        var(--kohsanuk-cream-100);
    --cp-cream-2:        var(--kohsanuk-cream-50);
    --cp-tile-bg:        var(--kohsanuk-cream-100); /* was #faf8f4 in source — now using --kohsanuk-cream-100 (#fbf8f2) */
    --cp-text:           var(--kohsanuk-text);
    --cp-text-soft:      var(--kohsanuk-text-soft);
    --cp-text-muted:     var(--kohsanuk-text-muted); /* was #9d8a72 in source — now using --kohsanuk-text-muted (#999988) */
    --cp-border:         var(--kohsanuk-rule); /* was #f0eee9 in source — now using --kohsanuk-rule (#ece6d8) */
    --cp-card-border:    var(--kohsanuk-brand-soft); /* was orange-tinted (`rgba(201,122,60,…)`/`accent-soft`) which read as a yellow halo around tour cards. Now brand-soft so each theme paints a subtle brand-tinted border (navy in Classic). */
    --cp-card-shadow:    var(--kohsanuk-shadow-soft); /* was 0 2px 10px rgba(120,90,50,0.08) in source — now using --kohsanuk-shadow-soft */

    /* ── wizard-v2-styles aliases (--w2-*) ─────────────────────────────── */
    --w2-page-bg:            var(--kohsanuk-bg-page);
    --w2-card-bg:            var(--kohsanuk-surface);
    --w2-field-bg:           var(--kohsanuk-bg-page);
    --w2-border:             var(--kohsanuk-border);
    --w2-border-subtle:      var(--kohsanuk-border-subtle);
    --w2-border-accent-soft: var(--kohsanuk-border-accent-soft);
    --w2-accent:             var(--kohsanuk-accent);
    --w2-accent-tint:        var(--kohsanuk-accent-tint);
    --w2-accent-shadow:      var(--kohsanuk-accent-shadow);
    --w2-extra-border:       var(--kohsanuk-border-extra);
    --w2-text:               var(--kohsanuk-text);
    --w2-text-soft:          var(--kohsanuk-text-soft);
    --w2-text-muted:         var(--kohsanuk-text-muted);
    --w2-step-dark:          var(--kohsanuk-text);

    /* ── tour-similar.css aliases (--st-*) ─────────────────────────────── */
    --st-terracotta:     var(--kohsanuk-accent);
    --st-text:           var(--kohsanuk-text);
    --st-text-soft:      var(--kohsanuk-text-soft);
    --st-text-muted:     var(--kohsanuk-text-muted);
    --st-border:         var(--kohsanuk-rule);
    --st-card-border:    var(--kohsanuk-brand-soft); /* was orange-tinted accent-soft (read as yellow halo). Brand-soft = navy in Classic. */
    --st-card-shadow:    var(--kohsanuk-shadow-soft);
    --st-save-bg:        var(--kohsanuk-success-bg); /* was #e8f3e8 — close to --kohsanuk-success-bg (#d8efd8) */
    --st-save-fg:        var(--kohsanuk-success-text); /* was #2f6a2f — close to --kohsanuk-success-text (#2b6a2b) */
}