/* =============================================================================
   SHOPIMAL — DESIGN TOKENS
   Build Brief §3.9. Verbatim. Do not round, tweak or approximate.
   No colour, font, radius or spacing value exists outside this file.
   ========================================================================== */

:root{
  /* --- Blue (identity) ---------------------------------------------------- */
  --blue-50:#EDF2FF;  --blue-100:#DBE4FF; --blue-200:#B6C8FF; --blue-300:#8AA6FF;
  --blue-400:#5B82FF; --blue-500:#2458F0; --blue-600:#1543CC; --blue-700:#0F33A0;
  --blue-800:#0B2578; --blue-900:#071A55;

  /* --- Pink (action) ------------------------------------------------------ */
  --pink-50:#FEF0F6;  --pink-100:#FDDDEA; --pink-200:#FBB6D2; --pink-300:#F787B4;
  --pink-400:#EE5896; --pink-500:#DB2F79; --pink-600:#BC1E62; --pink-700:#94174D;
  --pink-800:#6B1038;

  /* --- Slate (neutral) ---------------------------------------------------- */
  --slate-0:#FFFFFF;  --slate-25:#FBFCFE; --slate-50:#F5F7FC; --slate-100:#EBEFF7;
  --slate-200:#D9DFEC; --slate-300:#B0B9CD; --slate-400:#7D879F; --slate-500:#5C667E;
  --slate-600:#424B60; --slate-700:#2D3546; --slate-800:#1B2130; --slate-900:#10141F;

  /* --- Semantic ----------------------------------------------------------- */
  --success:#0C7F49; --warning:#A85F00; --error:#CF3A1F; --info:#1543CC;
  --success-bg:#D6F2E4; --success-fg:#075C34;
  --warning-bg:#FCEBD6; --warning-fg:#7A4500;
  --error-bg:#FBE3DE;   --error-fg:#8E2412;

  /* --- Gradients — always 115deg, always exactly two stops ---------------- */
  --grad:linear-gradient(115deg,#2458F0 0%,#BC1E62 100%);
  --grad-deep:linear-gradient(115deg,#1543CC 0%,#94174D 100%);
  --grad-blue:linear-gradient(115deg,#2458F0 0%,#0B2578 100%);

  /* --- Type --------------------------------------------------------------- */
  --font-display:'Outfit',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  /* --- Shape -------------------------------------------------------------- */
  --radius-sm:8px; --radius:16px; --radius-lg:20px; --radius-pill:999px;
  --border:1px solid var(--slate-200);
  --border-input:1.5px solid var(--slate-400);

  /* --- Elevation ---------------------------------------------------------- */
  --shadow:0 4px 16px rgba(7,26,85,.08);
  --shadow-lg:0 12px 32px rgba(7,26,85,.14);

  /* --- Spacing scale — use no other values -------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px; --sp-11:96px;

  /* --- Layout ------------------------------------------------------------- */
  --container:1200px;
  --gutter:24px;          /* 32px tablet, 40px desktop — see media queries */
  --section-y:56px;       /* 80px desktop */

  /* --- Motion ------------------------------------------------------------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:160ms;

  /* --- Role tokens — components reference THESE, never the raw ramp ------- */
  --sh-cta:var(--pink-600);
  --sh-cta-hover:var(--pink-700);
  --sh-heading:var(--blue-900);
  --sh-body:var(--slate-700);
  --sh-muted:var(--slate-500);
  --sh-link:var(--blue-600);
  --sh-link-hover:var(--blue-700);
  --sh-focus:var(--blue-500);
  --sh-surface:var(--slate-0);
  --sh-surface-alt:var(--slate-50);
  --sh-line:var(--slate-200);
  --sh-deep:var(--blue-900);
}

@media (min-width:768px){ :root{ --gutter:32px; } }
@media (min-width:1024px){ :root{ --gutter:40px; --section-y:80px; } }

/* Reduced motion is honoured globally — Build Brief §3.8. */
@media (prefers-reduced-motion:reduce){
  :root{ --dur:0ms; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .sh-card:hover,.sh-pcard:hover{ transform:none !important; }
}