/* ============================================================================
   TOKENS-BRIDGE.CSS · Legacy design tokens → WordPress preset variables
   ----------------------------------------------------------------------------
   THE most important file in the migration architecture.

   Your original components.css / sections.css / pages.css reference tokens
   like var(--color-coral). WordPress generates its own variables from
   theme.json (e.g. --wp--preset--color--coral) and updates them live when
   you change values in Appearance → Editor → Styles.

   This bridge maps old names → WP presets, so:
     1. All existing component CSS works unchanged.
     2. Every dashboard change (colors, fonts, spacing) cascades through
        the ENTIRE site instantly — including legacy selectors.

   NEVER hard-code values here. Only var() references.
   ========================================================================== */

:root {
  /* --- Colors ------------------------------------------------------------ */
  --color-pine:        var(--wp--preset--color--pine);
  --color-pine-light:  var(--wp--preset--color--pine-light);
  --color-coral:       var(--wp--preset--color--coral);
  --color-ochre:       var(--wp--preset--color--ochre);

  --color-ink:         var(--wp--preset--color--ink);
  --color-muted:       var(--wp--preset--color--muted);
  --color-faint:       var(--wp--preset--color--faint);

  --color-paper:       var(--wp--preset--color--paper);
  --color-surface:     var(--wp--preset--color--surface);
  --color-surface-alt: var(--wp--preset--color--surface-alt);
  --color-border:      var(--wp--preset--color--border);

  --color-success:     var(--wp--preset--color--success);
  --color-warning:     var(--wp--preset--color--warning);
  --color-error:       var(--wp--preset--color--error);

  /* Semantic aliases (unchanged public API for all component CSS) */
  --bg:            var(--color-paper);
  --bg-surface:    var(--color-surface);
  --text:          var(--color-ink);
  --text-muted:    var(--color-muted);
  --accent:        var(--color-coral);
  --brand:         var(--color-pine);
  --border:        var(--color-border);

  /* --- Typography ---------------------------------------------------------- */
  --font-display: var(--wp--preset--font-family--display);
  --font-body:    var(--wp--preset--font-family--body);
  --font-mono:    var(--wp--preset--font-family--mono);

  --fs-hero:  var(--wp--preset--font-size--hero);
  --fs-h2:    var(--wp--preset--font-size--xx-large);
  --fs-h3:    var(--wp--preset--font-size--x-large);
  --fs-lg:    var(--wp--preset--font-size--large);
  --fs-body:  var(--wp--preset--font-size--medium);
  --fs-sm:    var(--wp--preset--font-size--small);
  --fs-xs:    var(--wp--preset--font-size--x-small);
  --fs-mono:  var(--wp--preset--font-size--mono-label);

  --lh-tight: var(--wp--custom--line-height--tight);
  --lh-snug:  var(--wp--custom--line-height--snug);
  --lh-body:  var(--wp--custom--line-height--body);

  /* --- Spacing (8-point scale) --------------------------------------------- */
  --space-1: var(--wp--preset--spacing--10);
  --space-2: var(--wp--preset--spacing--20);
  --space-3: var(--wp--preset--spacing--30);
  --space-4: var(--wp--preset--spacing--40);
  --space-5: var(--wp--preset--spacing--50);
  --space-6: var(--wp--preset--spacing--60);
  --space-7: var(--wp--preset--spacing--70);
  --space-8: var(--wp--preset--spacing--80);
  --space-9: var(--wp--preset--spacing--90);
  --section-y: var(--wp--preset--spacing--section);

  /* --- Radii / shadows ------------------------------------------------------ */
  --radius-btn:   var(--wp--custom--radius--btn);
  --radius-card:  var(--wp--custom--radius--card);
  --radius-media: var(--wp--custom--radius--media);
  --radius-pill:  var(--wp--custom--radius--pill);

  --shadow-sm: var(--wp--preset--shadow--sm);
  --shadow-md: var(--wp--preset--shadow--md);
  --shadow-lg: var(--wp--preset--shadow--lg);

  /* --- Layout + motion ------------------------------------------------------ */
  --container:  var(--wp--style--global--wide-size, 1200px);
  --gutter:     var(--wp--preset--spacing--gutter);
  --nav-h:      var(--wp--custom--layout--nav-height);

  --ease:       var(--wp--custom--motion--ease);
  --dur-fast:   var(--wp--custom--motion--dur-fast);
  --dur:        var(--wp--custom--motion--dur);
  --dur-slow:   var(--wp--custom--motion--dur-slow);
}

/* ============================================================================
   DARK MODE — JS toggle (data-theme) on top of the Styles-panel variation.
   The toggle overrides preset values at the root, exactly like the original
   variables.css did, and cascades through the bridge automatically.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-ink:         #F1ECE3;
  --color-muted:       #B5AE9F;
  --color-faint:       #8F887A;

  --color-paper:       #14130F;
  --color-surface:     #1E1C17;
  --color-surface-alt: #262219;
  --color-border:      #34302A;

  --color-pine:        #6BA48F;
  --color-coral:       #FF6B4A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);
}

/* WordPress paints body background from theme.json presets; re-point it to
   the bridged tokens so the JS dark toggle affects it too. */
:root[data-theme="dark"] body {
  background: var(--color-paper);
  color: var(--color-ink);
}