/* ============================================================
   MIRAE SKIN ATELIER — Design Tokens (3-Layer System)
   ============================================================
   Layer 1 — PRIMITIVES (--c-*, --ff-*, --fs-*, --sp-*, --dur-*, --shadow-*)
   live in main.css :root for now (single source of truth, untouched).
   This file builds Layer 2 (semantic) and Layer 3 (component) on top.

   Why a separate file:
   - Plugin booking.css depends on this handle (mirae-tokens) so plugin
     and theme always agree on color/typography/motion language.
   - Easier to audit "what does the brand actually look like" — one file,
     scoped to design language only, no implementation.
   - Critical CSS extraction (Phase 7) starts here; primitives + key
     semantic aliases inline above-fold.

   Naming:
   - Semantic = intent (--text-primary, --accent-primary, --bg-card)
   - Component = use (--btn-bg-primary, --card-radius, --field-bg)
   ============================================================ */

:root {

	/* ── Layer 2: SEMANTIC — intent over color ────────────────── */

	/* Surface */
	--bg-page:        var(--c-ivory);
	--bg-page-warm:   var(--c-cream);
	--bg-card:        rgba(255, 251, 247, 0.86);
	--bg-card-strong: rgba(255, 251, 247, 0.96);
	--bg-glass:       var(--surface-1);
	--bg-overlay:     rgba(26, 20, 16, 0.42);
	--bg-on-accent:   var(--c-ink);

	/* Text */
	--text-primary:    var(--c-ink);
	--text-secondary:  var(--c-ink-soft);
	--text-muted:      var(--c-ink-mute);
	--text-on-accent:  var(--c-ivory);
	--text-on-dark:    var(--c-ivory);
	--text-link:       var(--c-ink);

	/* Accent — for CTAs, highlights, brand moments */
	--accent-primary:        var(--c-rose);            /* warm rose-blush */
	--accent-primary-hover:  var(--c-rose);
	--accent-primary-soft:   var(--c-blush);
	--accent-secondary:      var(--c-sage-deep);   /* calm sage */
	--accent-secondary-soft: var(--c-sage);
	--accent-meta:           var(--c-bronze);      /* metallic info */

	/* Borders */
	--border-subtle:  var(--hairline);
	--border-strong:  var(--hairline-strong);
	--border-accent:  var(--accent-primary);
	--border-focus:   var(--c-ink);

	/* Status — used for form validation, booking states */
	--status-success:    var(--c-sage-deep);
	--status-success-bg: rgba(149, 169, 148, 0.14);
	--status-warning:    var(--c-bronze);
	--status-warning-bg: rgba(184, 153, 104, 0.14);
	--status-error:      #b85450;
	--status-error-bg:   rgba(184, 84, 80, 0.10);
	--status-info:       var(--c-ink-soft);
	--status-info-bg:    rgba(74, 63, 56, 0.06);

	/* Type — semantic role aliases */
	--type-display: var(--ff-display);
	--type-body:    var(--ff-body);
	--type-mono:    var(--ff-mono);

	/* Type weight roles (Inter Tight has 300/400/500/600 loaded) */
	--weight-light:    300;
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	/* Fraunces has variable weight 300..700 */
	--weight-display-light:    320;
	--weight-display-regular:  400;
	--weight-display-medium:   500;
	--weight-display-bold:     600;

	/* Motion roles — composed presets that combine duration + easing */
	--motion-fast:       var(--dur-fast)  var(--ease-out);
	--motion-base:       var(--dur-base)  var(--ease-out);
	--motion-slow:       var(--dur-slow)  var(--ease-out);
	--motion-spring:     var(--dur-base)  var(--ease-spring);
	--motion-in-out:     var(--dur-base)  var(--ease-in-out);

	/* Shadow roles — separate "elevation intent" from raw shadow */
	--elevation-flat:    none;
	--elevation-low:     var(--shadow-1);
	--elevation-medium:  var(--shadow-2);
	--elevation-high:    var(--shadow-3);
	--elevation-glass:   var(--shadow-glass);

	/* Focus ring — single canonical value */
	--focus-ring-color:   var(--border-focus);
	--focus-ring-offset:  3px;
	--focus-ring-width:   2px;
	--focus-ring-radius:  4px;


	/* ── Layer 3: COMPONENT — concrete component tokens ────────── */

	/* Button */
	--btn-radius:           var(--radius-pill);
	--btn-padding-y:        14px;
	--btn-padding-x:        28px;
	--btn-padding-y-sm:     10px;
	--btn-padding-x-sm:     20px;
	--btn-padding-y-lg:     18px;
	--btn-padding-x-lg:     36px;
	--btn-font-size:        var(--fs-sm);
	--btn-font-weight:      var(--weight-medium);
	--btn-letter-spacing:   0.02em;
	--btn-transition:       var(--motion-fast);

	--btn-bg-primary:        var(--text-primary);
	--btn-fg-primary:        var(--text-on-dark);
	--btn-bg-primary-hover:  var(--text-secondary);

	--btn-bg-ghost:          transparent;
	--btn-fg-ghost:          var(--text-primary);
	--btn-border-ghost:      var(--border-strong);
	--btn-bg-ghost-hover:    rgba(26, 20, 16, 0.04);

	--btn-bg-accent:         var(--accent-primary);
	--btn-fg-accent:         var(--c-ink);
	--btn-bg-accent-hover:   var(--accent-primary-hover);

	/* Card */
	--card-bg:           var(--bg-card);
	--card-bg-strong:    var(--bg-card-strong);
	--card-border:       var(--border-subtle);
	--card-radius:       var(--radius-md);
	--card-radius-lg:    var(--radius-lg);
	--card-shadow:       var(--elevation-medium);
	--card-shadow-hover: var(--elevation-high);
	--card-padding:      var(--sp-5);
	--card-padding-lg:   var(--sp-6);
	--card-blur:         var(--surface-glass-blur);

	/* Form fields (input / textarea / select) */
	--field-bg:           rgba(255, 255, 255, 0.78);
	--field-bg-focus:     rgba(255, 255, 255, 0.96);
	--field-border:       var(--border-subtle);
	--field-border-focus: var(--text-primary);
	--field-border-error: var(--status-error);
	--field-radius:       var(--radius-sm);
	--field-padding-y:    12px;
	--field-padding-x:    16px;
	--field-fg:           var(--text-primary);
	--field-placeholder:  var(--text-muted);

	/* Section spacing — premium editorial rhythm */
	--section-py:        var(--sp-8);
	--section-py-tight:  var(--sp-7);
	--section-py-loose:  var(--sp-9);
	--section-gap-y:     var(--sp-7);

	/* Container */
	--content-max:        var(--container);
	--content-max-narrow: var(--container-narrow);
	--content-gutter:     var(--gutter);

	/* Image */
	--img-radius:         var(--radius-md);
	--img-radius-lg:      var(--radius-lg);
	--img-aspect-portrait: 3 / 4;
	--img-aspect-square:   1 / 1;
	--img-aspect-wide:     16 / 9;
	--img-aspect-editorial: 4 / 5;

	/* Booking widget bridge — exported for plugin consumption.
	   Plugin's booking.css has its own --mb-* with hard fallbacks; these
	   override the plugin's defaults when this file loads first. Phase 4
	   booking refactor will fully wire plugin to these. */
	--mb-bg:           var(--bg-page);
	--mb-card:         var(--bg-card-strong);
	--mb-line:         var(--border-subtle);
	--mb-line-strong:  var(--border-strong);
	--mb-text:         var(--text-primary);
	--mb-text-soft:    var(--text-secondary);
	--mb-text-mute:    var(--text-muted);
	--mb-accent:       var(--accent-primary);
	--mb-accent-hover: var(--accent-primary-hover);
	--mb-accent-soft:  var(--accent-primary-soft);
	--mb-radius:       var(--card-radius);
	--mb-radius-sm:    var(--field-radius);
	--mb-radius-pill:  var(--radius-pill);
	--mb-shadow:       var(--card-shadow);
	--mb-font-display: var(--type-display);
	--mb-font-body:    var(--type-body);
	--mb-motion:       var(--motion-fast);
}

/* ── Reduced motion: zero out motion-role tokens ───────────────── */
@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-fast:   0ms linear;
		--motion-base:   0ms linear;
		--motion-slow:   0ms linear;
		--motion-spring: 0ms linear;
		--motion-in-out: 0ms linear;
		--mb-motion:     0ms linear;
	}
}

/* ── Touch-only override: turn off hover-soft elevations on touch ── */
@media (hover: none) {
	:root {
		--card-shadow-hover: var(--card-shadow);
	}
}

/* ── Layer 2.5: BREAKPOINTS (industry standard, mobile-first) ───── */
:root {
	--bp-xs:  320px;   /* min phone */
	--bp-sm:  480px;   /* large phone */
	--bp-md:  768px;   /* tablet portrait */
	--bp-lg:  1024px;  /* tablet landscape / small desktop */
	--bp-xl:  1280px;  /* desktop */

	/* Prose measure ceilings — standardized 3 widths */
	--measure-narrow: 38ch;
	--measure:        52ch;
	--measure-wide:   62ch;

	/* Card lift hover token (visual harmony) */
	--lift-card: -3px;

	/* Focus ring radius — legitimize the existing 4px */
	--radius-focus: 4px;
}