/* ═══════════════════════════════════════════════════════════════════════════
   Yoshino Massage — Design Tokens
   Brand colors receive DEFAULT values here and are overridden by the inline
   theme block head.php emits from config.php ($THEME_PRESETS). Components
   must only ever reference tokens — never raw hex.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand colors (defaults = 'sakura-ink' preset) ─────────────────── */
    --color-primary:      #B4536B;
    --color-primary-dark: #8E3D53;
    --color-primary-soft: #F9E9EE;
    --color-blossom:      #E8A0B4;   /* decorative only — never text */
    --color-ink:          #1F2328;
    --color-ink-soft:     #585055;
    --color-paper:        #FAF6F1;
    --color-paper-alt:    #F3ECE4;
    --color-gold:         #B08D4F;   /* large text / decorative only */
    --color-gold-text:    #7A5E32;   /* small-text-safe gold */
    --color-matcha:       #4A5D52;
    --color-border:       #E9E0D8;
    --color-petal-1:      #FFD9E3;   /* sakura canvas tints — decorative */
    --color-petal-2:      #F6C3D2;
    --color-petal-3:      #EFB0C4;

    /* ── Semantic aliases (what components actually use) ───────────────── */
    --color-white:          #FFFFFF;
    --color-bg:             var(--color-paper);
    --color-bg-alt:         var(--color-paper-alt);
    --color-surface:        #FFFFFF;
    --color-text:           var(--color-ink);
    --color-text-secondary: var(--color-ink-soft);
    --color-text-inverse:   #FFF9F5;
    --color-accent:         var(--color-gold-text);
    --color-link:           var(--color-primary-dark);
    --color-error:          #B3462E;
    --color-success:        #3E6B4F;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-display: 'Shippori Mincho', 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.65;
    --leading-relaxed: 1.8;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;

    --tracking-wide: 0.14em;   /* uppercase section labels */

    /* ── Spacing ───────────────────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Layout ────────────────────────────────────────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1400px;
    --header-height: 76px;
    --topbar-height: 38px;
    --cta-bar-height: 64px;

    /* ── Borders & radius (restrained — premium, not bubbly) ───────────── */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* ── Shadows (soft, low-alpha) ─────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.04);
    --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.06), 0 1px 2px rgba(31, 35, 40, 0.03);
    --shadow-md: 0 4px 10px -2px rgba(31, 35, 40, 0.06), 0 2px 4px -2px rgba(31, 35, 40, 0.03);
    --shadow-lg: 0 12px 24px -6px rgba(31, 35, 40, 0.08), 0 4px 8px -4px rgba(31, 35, 40, 0.03);
    --shadow-xl: 0 22px 40px -10px rgba(31, 35, 40, 0.10);

    /* ── Transitions ───────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ── Z-index ───────────────────────────────────────────────────────── */
    --z-petals:   1;
    --z-content:  2;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-ctabar:   250;
    --z-overlay:  300;
    --z-modal:    400;
}