/* ==========================================================================
   Slick Popup — Design Tokens
   Ported verbatim from the LOCKED design system (design-system/project/
   colors_and_type.css). Single source of truth for color, type, spacing,
   radius, shadow, motion + the popup-animation library.

   Aesthetic: warm, confident, modern. Dominant warm ORANGE action color
   (#F0610F) on a warm cream canvas (#FBF6EF) with deep warm-ink text.

   NOTE: the design system's prototyping @import font lines (Fontshare/Google)
   are intentionally NOT included — fonts are self-hosted, see fonts.css.
   The token font families reference the self-hosted families.

   A backward-compat alias layer at the bottom maps the theme's original
   --sp-* token names onto these locked values, so the existing main.css and
   templates render in the correct (orange/cream/ink) palette without a rewrite.
   ========================================================================== */

:root {
  /* ==========================================================
     COLOR — Core palette
     ========================================================== */

  /* Orange — primary / action ----------------------------------- */
  --orange-50:  #FFF5EE;
  --orange-100: #FFE7D6;
  --orange-200: #FFC9A3;
  --orange-300: #FFA66B;
  --orange-400: #FB813E;
  --orange-500: #F0610F;   /* primary */
  --orange-600: #D14C08;   /* hover */
  --orange-700: #A93C0B;
  --orange-800: #7E2D0E;
  --orange-900: #591F0A;

  /* Warm neutrals — ink ----------------------------------------- */
  --ink-900: #1F1813;      /* darkest — ink sections, body on light */
  --ink-800: #332A22;
  --ink-700: #4F4339;
  --ink-600: #6E6053;      /* secondary text */
  --ink-500: #8F8174;      /* tertiary / muted */
  --ink-400: #B5A899;      /* disabled, faint */
  --ink-300: #D6CABB;      /* strong hairline */
  --ink-200: #EAE0D4;      /* hairline / divider */
  --ink-100: #F4ECE2;      /* subtle fill */

  /* Surfaces ---------------------------------------------------- */
  --cream:  #FBF6EF;       /* page canvas */
  --white:  #FFFFFF;       /* cards */

  /* Accents — use sparingly ------------------------------------- */
  --teal-600: #0F6E63;     /* links, trust elements */
  --teal-50:  #E9F4F1;
  --gold-400: #F4B740;     /* ratings, small highlights */

  /* Semantic raw ------------------------------------------------ */
  --success: #1F9D63;
  --warning: #E8A317;
  --error:   #D64545;

  /* ==========================================================
     COLOR — Semantic aliases
     ========================================================== */
  --bg:           var(--cream);
  --bg-elevated:  var(--white);
  --bg-muted:     var(--ink-100);
  --bg-ink:       var(--ink-900);

  --fg1:          var(--ink-900);
  --fg2:          var(--ink-600);
  --fg3:          var(--ink-500);
  --fg-disabled:  var(--ink-400);
  --fg-on-ink:    var(--cream);
  --fg-on-ink-2:  #C9BEB0;

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-ink:    rgba(255,255,255,0.12);
  --border-focus:  var(--orange-500);

  /* Action / brand */
  --action:        var(--orange-500);
  --action-hover:  var(--orange-600);
  --action-active: var(--orange-700);
  --action-fg:     var(--white);
  --action-soft:   var(--orange-50);
  --action-soft-border: var(--orange-200);

  /* Orange as TEXT on light must be 600/700 for AA contrast */
  --orange-text:   var(--orange-600);

  --link:          var(--teal-600);
  --link-hover:    var(--orange-600);

  --semantic-success: var(--success);
  --semantic-warning: var(--warning);
  --semantic-error:   var(--error);

  /* ==========================================================
     TYPOGRAPHY (self-hosted family names — see fonts.css)
     ========================================================== */
  --font-display: 'Clash Display', 'Hanken Grotesk', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale (clamp) */
  --fs-display:  clamp(2.75rem, 6vw, 4.5rem);    /* 44 → 72 */
  --fs-h1:       clamp(2.25rem, 4vw, 3.25rem);   /* 36 → 52 */
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);    /* 28 → 40 */
  --fs-h3:       1.5rem;    /* 24 */
  --fs-h4:       1.25rem;   /* 20 */
  --fs-body-lg:  1.125rem;  /* 18 */
  --fs-body:     1rem;      /* 16 */
  --fs-sm:       0.875rem;  /* 14 */
  --fs-eyebrow:  0.8125rem; /* 13 */

  /* Line heights */
  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.65;
  --lh-body-lg: 1.7;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --ls-display: -0.02em;
  --ls-heading: -0.015em;
  --ls-body:    0;
  --ls-eyebrow: 0.12em;

  /* ==========================================================
     SPACING — 4/8-based scale (px)  [design-system scale]
     ========================================================== */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --space-15: 160px;

  /* ==========================================================
     LAYOUT
     ========================================================== */
  --container-max: 1200px;
  --container-wide: 1320px;
  --measure:       66ch;
  --header-h:      72px;
  --docs-sidebar-w: 264px;
  --docs-toc-w:     220px;

  /* ==========================================================
     RADII
     ========================================================== */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ==========================================================
     SHADOWS — warm-tinted
     ========================================================== */
  --shadow-sm:     0 1px 2px rgba(31,24,19,.06);
  --shadow-md:     0 6px 20px -6px rgba(31,24,19,.14);
  --shadow-lg:     0 20px 50px -12px rgba(31,24,19,.22);
  --shadow-glow:   0 12px 40px -8px rgba(240,97,15,.35);
  --shadow-focus:  0 0 0 2px var(--cream), 0 0 0 4px var(--orange-500);
  --shadow-focus-ink: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--orange-400);

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease:        cubic-bezier(0.22, 0.68, 0.18, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    450ms;

  /* ==========================================================
     Z-INDEX
     ========================================================== */
  --z-header:   50;
  --z-dropdown: 60;
  --z-overlay:  70;
  --z-popup:    80;
  --z-toast:    90;

  /* ==========================================================
     TEXTURE — atmospheric tokens
     ========================================================== */
  --dot-grid: radial-gradient(rgba(31,24,19,0.07) 1px, transparent 1px);
  --dot-grid-size: 22px 22px;
  --hero-glow: radial-gradient(60% 55% at 70% 30%, rgba(240,97,15,0.18), rgba(240,97,15,0) 70%);

  /* ==========================================================
     COLOR SCHEMES — the plugin's 5 popup palettes
     (from shared/styles.css .scheme-* + Schemes.jsx dots).
     Used by the demo tiles + scheme swatches.
     ========================================================== */
  --scheme-master-red:    #C0322B;
  --scheme-creamy-orange: #F0610F;
  --scheme-light-blue:    #2E86C1;
  --scheme-cool-green:    #1F9D63;
  --scheme-classic-grey:  #4F4339;

  /* ==========================================================================
     BACKWARD-COMPAT ALIAS LAYER
     The existing main.css + templates use a --sp-* token vocabulary built from
     a staging *approximation* (red house color, off-spec cream/ink). These
     aliases re-point those names at the LOCKED design-system values above so
     the whole theme renders in the correct orange/cream/ink palette with no
     markup or component-CSS rewrite. New work should prefer the tokens above.
     ========================================================================== */

  /* ---- Brand / ink ---- */
  --sp-ink:        var(--ink-900);
  --sp-ink-soft:   var(--ink-800);
  --sp-paper:      var(--cream);
  --sp-paper-2:    var(--ink-100);
  --sp-card:       var(--white);
  --sp-line:       var(--ink-200);
  --sp-line-ink:   var(--border-ink);

  /* ---- Text ---- */
  --sp-text:       var(--ink-900);
  --sp-text-soft:  var(--ink-600);
  --sp-text-mute:  var(--ink-500);
  --sp-text-inv:   var(--cream);
  --sp-text-inv-soft: var(--fg-on-ink-2);

  /* ---- Accent — now ORANGE (the locked house color), not red ---- */
  --sp-red:        var(--scheme-master-red);    /* the "Master Red" popup scheme */
  --sp-red-deep:   #9C281F;
  --sp-orange:     var(--orange-500);           /* Creamy Orange scheme = brand action */
  --sp-blue:       var(--scheme-light-blue);
  --sp-green:      var(--scheme-cool-green);
  --sp-grey:       var(--scheme-classic-grey);

  --sp-accent:      var(--orange-500);           /* brand action = ORANGE */
  --sp-accent-deep: var(--orange-600);

  /* ---- Type families ---- */
  --sp-font-display: var(--font-display);
  --sp-font-body:    var(--font-sans);
  --sp-font-mono:    var(--font-mono);

  /* ---- Fluid type scale ---- */
  --sp-fs-mega:  var(--fs-display);
  --sp-fs-h1:    var(--fs-h1);
  --sp-fs-h2:    var(--fs-h2);
  --sp-fs-h3:    var(--fs-h3);
  --sp-fs-h4:    var(--fs-h4);
  --sp-fs-lead:  var(--fs-body-lg);
  --sp-fs-body:  var(--fs-body);
  --sp-fs-sm:    var(--fs-sm);
  --sp-fs-xs:    0.8125rem;
  --sp-fs-eyebrow: var(--fs-eyebrow);

  /* ---- Spacing (theme rem scale — kept; unrelated to color drift) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --sp-gutter:  clamp(1.25rem, .5rem + 3vw, 3rem);
  --sp-maxw:    var(--container-max);
  --sp-maxw-text: 760px;

  /* ---- Radii ---- */
  --sp-r-sm: var(--r-sm);
  --sp-r:    var(--r-md);
  --sp-r-lg: var(--r-lg);
  --sp-r-xl: var(--r-xl);
  --sp-r-pill: var(--r-pill);

  /* ---- Shadows (warm-tinted, from design system) ---- */
  --sp-shadow-sm: var(--shadow-sm);
  --sp-shadow:    var(--shadow-md);
  --sp-shadow-lg: var(--shadow-lg);
  --sp-shadow-ink:0 30px 70px -28px rgba(0,0,0,.7);

  /* ---- Motion ---- */
  --sp-ease:     var(--ease);
  --sp-ease-out: var(--ease);
  --sp-dur:      var(--dur-slow);
}

/* ============================================================
   POPUP ANIMATION LIBRARY (from the design system)
   .anim-<name> on a popup card plays the plugin's real entrance.
   Respect prefers-reduced-motion below.
   ============================================================ */
@keyframes sp-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-zoom      { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes sp-bounce {
  0%   { opacity: 0; transform: translateY(-60px); }
  60%  { opacity: 1; transform: translateY(12px); }
  80%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes sp-flipx {
  from { opacity: 0; transform: perspective(800px) rotateX(80deg); }
  to   { opacity: 1; transform: perspective(800px) rotateX(0); }
}
@keyframes sp-flipy {
  from { opacity: 0; transform: perspective(800px) rotateY(80deg); }
  to   { opacity: 1; transform: perspective(800px) rotateY(0); }
}
@keyframes sp-lightspeed {
  from { opacity: 0; transform: translateX(100%) skewX(-25deg); }
  60%  { opacity: 1; transform: translateX(-12px) skewX(12deg); }
  80%  { transform: translateX(0) skewX(-4deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes sp-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes sp-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sp-rubberband {
  0% { transform: scale(1,1); }
  30% { transform: scale(1.25,.75); }
  40% { transform: scale(.75,1.25); }
  55% { transform: scale(1.05,.95); }
  100% { transform: scale(1,1); }
}
@keyframes sp-shake {
  0%,100% { transform: translateX(0); }
  10%,30%,50%,70%,90% { transform: translateX(-8px); }
  20%,40%,60%,80% { transform: translateX(8px); }
}
@keyframes sp-swing {
  20% { transform: rotate(12deg); } 40% { transform: rotate(-8deg); }
  60% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
@keyframes sp-tada {
  0% { transform: scale(1) rotate(0); }
  10%,20% { transform: scale(.9) rotate(-3deg); }
  30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); }
  40%,60%,80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes sp-jello {
  0%,100% { transform: skewX(0) skewY(0); }
  30% { transform: skewX(-12deg) skewY(-12deg); }
  45% { transform: skewX(6deg) skewY(6deg); }
  60% { transform: skewX(-3deg) skewY(-3deg); }
  75% { transform: skewX(1.5deg) skewY(1.5deg); }
}
@keyframes sp-wobble {
  0%,100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-20px) rotate(-5deg); }
  30% { transform: translateX(16px) rotate(3deg); }
  45% { transform: translateX(-12px) rotate(-3deg); }
  60% { transform: translateX(8px) rotate(2deg); }
  75% { transform: translateX(-4px) rotate(-1deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .anim-fade       { animation: sp-fade        var(--dur-base) var(--ease) both; }
  .anim-zoom       { animation: sp-zoom         var(--dur-base) var(--ease-spring) both; }
  .anim-bounce     { animation: sp-bounce       700ms var(--ease) both; }
  .anim-flipx      { animation: sp-flipx        var(--dur-slow) var(--ease) both; }
  .anim-flipy      { animation: sp-flipy        var(--dur-slow) var(--ease) both; }
  .anim-lightspeed { animation: sp-lightspeed   var(--dur-slow) var(--ease) both; }
  .anim-flash      { animation: sp-flash        700ms linear both; }
  .anim-pulse      { animation: sp-pulse        600ms var(--ease) both; }
  .anim-rubberband { animation: sp-rubberband   800ms var(--ease) both; }
  .anim-shake      { animation: sp-shake        700ms var(--ease) both; }
  .anim-swing      { animation: sp-swing        800ms var(--ease) both; transform-origin: top center; }
  .anim-tada       { animation: sp-tada         900ms var(--ease) both; }
  .anim-jello      { animation: sp-jello        800ms var(--ease) both; }
  .anim-wobble     { animation: sp-wobble       900ms var(--ease) both; }
}