/* ==================================================================
   APF • THEME BRIDGE (tokens only)
   Bridges html[data-site-theme] → --apf-* variables for consumers.
   No layout/visual rules below.
   ================================================================== */

.apf-common-box {
  /* ---------------- Hues (passthrough with safe fallbacks) ---------------- */
  --apf-hue1: var(--hue1, 330);
  --apf-hue2: var(--hue2, 210);
  --apf-hue3: var(--hue3, 260);
  --apf-hue4: var(--hue4, 315);
  --apf-hue5: var(--hue5, 220);
  --apf-hue6: var(--hue6, 300);

  /* ---------------- Scale (expose all six accents) ------------------------ */
  --apf-c1: var(--ctl-c1, oklch(0.78 0.21 330));
  --apf-c2: var(--ctl-c2, oklch(0.84 0.18 210));
  --apf-c3: var(--ctl-c3, oklch(0.92 0.06 260));
  --apf-c4: var(--ctl-c4, oklch(0.58 0.15 315));
  --apf-c5: var(--ctl-c5, oklch(0.74 0.16 220));
  --apf-c6: var(--ctl-c6, oklch(0.42 0.08 300));

  /* Legacy aliases (keep your previous names working) */
  --apf-accent-1: var(--apf-c1);
  --apf-accent-2: var(--apf-c2);
  --apf-accent-3: var(--apf-c5);

  /* ---------------- Text (passthrough) ------------------------------------ */
  --apf-text:     var(--text-high, #e6edf7);
  --apf-text-mid: var(--text-mid,  #b8c3d4);
  --apf-text-low: var(--text-low,  #9aa6b8);

  /* ---------------- Surfaces (passthrough + computed helpers) ------------- */
  --apf-surface-0: var(--surface-0, #0a0a10);
  --apf-surface-1: var(--surface-1, hsl(var(--apf-hue6) 26% 10% / .92));
  --apf-surface-2: var(--surface-2, hsl(var(--apf-hue6) 22% 12% / .86));
  --apf-surface-3: var(--surface-3, hsl(var(--apf-hue6) 20% 14% / .78));

  /* Page/shortcode backgrounds are emitted by the plugin — expose them */
  --apf-page-bg:      var(--page-bg, var(--apf-surface-0));
  --apf-shortcode-bg: var(--shortcode-bg, var(--apf-surface-1));

  /* Derived tones (no visuals, just helper tokens) */
  --apf-surface-muted:  color-mix(in oklch, var(--apf-surface-2) 70%, transparent);
  --apf-surface-strong: color-mix(in oklch, var(--apf-surface-2) 85%, transparent);

  /* ---------------- Borders / Focus / Shadows ----------------------------- */
  --apf-border:         var(--border, #ffffff1a);
  --apf-focus:          var(--focus-ring,        color-mix(in oklch, var(--apf-c2) 65%, transparent));
  --apf-focus-strong:   var(--focus-ring-strong, color-mix(in oklch, var(--apf-c2) 85%, transparent));

  /* Drop shadows (passthrough from tokens if provided) */
  --apf-drop-sm: var(--drop-sm, 0 6px 14px hsl(var(--apf-hue2) 70% 10% / .35));
  --apf-drop-md: var(--drop-md, 0 12px 26px hsl(var(--apf-hue2) 70% 12% / .33));
  --apf-drop-lg: var(--drop-lg, 0 20px 36px hsl(var(--apf-hue2) 70% 10% / .32));

  /* ---------------- Buttons / Inputs (pure tokens) ------------------------ */
  /* Prefer theme-emitted values; otherwise derive from surfaces/scale */
  --apf-btn-fg:     var(--btn-fg, #0e0b12);
  --apf-btn-bg:     var(--btn-bg, linear-gradient(135deg,
                        color-mix(in oklch, var(--apf-c1) 92%, black),
                        color-mix(in oklch, var(--apf-c2) 92%, black)));
  --apf-btn-shadow: var(--btn-shadow, 0 8px 16px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08));

  /* Expose optional global gradient token if present */
  --apf-ctl-gradient: var(--ctl-gradient, linear-gradient(135deg, var(--apf-c1), var(--apf-c2)));

  /* Inputs derived from surfaces unless overridden by tokens */
  --apf-input-bg:           var(--input-bg, color-mix(in oklch, var(--apf-surface-0) 94%, white 6%));
  --apf-input-stroke:       var(--input-stroke,       color-mix(in oklch, var(--apf-c1) 42%, #ffffff0a));
  --apf-input-stroke-focus: var(--input-stroke-focus, color-mix(in oklch, var(--apf-c2) 52%, #ffffff1a));

  /* ---------------- Rhythm / Typography ----------------------------------- */
  --apf-gap:        var(--gap, 14px);
  --apf-radius:     var(--radius, 12px);
  --apf-radius-lg:  var(--radius-lg, 16px);
  --apf-gap-sm:     calc(var(--apf-gap) * .6);
  --apf-gap-lg:     calc(var(--apf-gap) * 1.4);

  --apf-font-label: var(--font-label, .90rem);
  --apf-font-input: var(--font-input, 1.3rem);
  --apf-line:       var(--line, 1.25);

  --apf-font-body:    var(--font-body, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji");
  --apf-font-heading: var(--font-heading, Orbitron, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans");
  --apf-body-wt:      var(--body-wt, 400);
  --apf-heading-wt:   var(--heading-wt, 700);

  /* ---------------- Motion ------------------------------------------------- */
  --apf-ease:       var(--ease, cubic-bezier(.5,1,.89,1));
  --apf-transition: var(--transition, .22s var(--apf-ease));
}