/* ============================================================
   Paw Sisters — Design tokens
   Brand: cyan #1EA4D6 -> blue #4A81C4 -> violet #8050B0, ink navy #042740
   Method from WEB-DESIGN-SKILLS.md, warm-friendly-premium tone.
   ============================================================ */
:root {
  /* --- Brand --- */
  --cyan: #1ea4d6;
  --cyan-bright: #35b6e4;
  --blue: #4a81c4;
  --violet: #8050b0;
  --violet-deep: #6b3f9c;

  --navy: #042740; /* dark stage sections + strong ink */
  --navy-2: #073350;
  --navy-deep: #021a2e; /* veils / shadows */

  --brand-gradient: linear-gradient(100deg, #1ea4d6 0%, #4a81c4 50%, #8050b0 100%);
  /* cool variant: cyan -> blue only, no violet (used on CTAs-adjacent surfaces) */
  --brand-gradient-cool: linear-gradient(100deg, #1ea4d6 0%, #3f8fd0 55%, #4a81c4 100%);
  --brand-gradient-rev: linear-gradient(100deg, #8050b0 0%, #4a81c4 50%, #1ea4d6 100%);
  --brand-gradient-vert: linear-gradient(160deg, #1ea4d6 0%, #4a81c4 48%, #8050b0 100%);

  /* --- Neutrals (cool, clean, medical-trust) --- */
  --canvas: #e7edf4; /* outer tinted canvas, behind the white frame */
  --surface: #ffffff; /* the white site frame + cards */
  --ink: #0e1b2b; /* body text */
  --ink-soft: #33475b; /* secondary text */
  --muted: #5b6b7a; /* muted labels */
  --line: rgba(4, 39, 64, 0.1);
  --line-strong: rgba(4, 39, 64, 0.16);

  /* On dark (navy stages) */
  --on-dark: rgba(255, 255, 255, 0.94);
  --on-dark-2: rgba(255, 255, 255, 0.66);
  --on-dark-3: rgba(255, 255, 255, 0.42);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  /* Soft tints */
  --sky: #e7f3fb;
  --lilac: #efe9fb;
  --mint: #e8f7f3;

  /* --- Typography --- */
  --font-body: 'Readex Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fredoka', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;

  /* Fluid type scale (restrained — base ~16px) */
  --step--2: clamp(0.72rem, 0.7rem + 0.08vw, 0.76rem);
  --step--1: clamp(0.82rem, 0.8rem + 0.12vw, 0.88rem);
  --step-0: clamp(0.96rem, 0.93rem + 0.14vw, 1.03rem);
  --step-1: clamp(1.1rem, 1.05rem + 0.26vw, 1.28rem);
  --step-2: clamp(1.28rem, 1.19rem + 0.46vw, 1.6rem);
  --step-3: clamp(1.5rem, 1.35rem + 0.75vw, 2.05rem);
  --step-4: clamp(1.78rem, 1.55rem + 1.15vw, 2.6rem);
  --step-5: clamp(2.1rem, 1.78rem + 1.6vw, 3.25rem);
  --step-6: clamp(2.4rem, 1.95rem + 2.3vw, 4.1rem);

  --lh-tight: 1.03;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --tracking-tight: -0.02em;
  --tracking-kicker: 0.2em;

  /* --- Layout (matched to the Hikal frame system) --- */
  --content-max: 1320px; /* shared content column inside the frame */
  --content-wide: 1320px;
  --measure: 40rem; /* reading measure */
  --pad-inline: clamp(1.25rem, 5vw, 5rem);
  --section-gap: clamp(3.5rem, 8vw, 8rem);
  --frame-gap: clamp(1.5rem, 4vw, 4rem); /* outer margin around the white frame */
  --frame-top: clamp(1rem, 2.2vw, 2.5rem); /* smaller top gap above the frame */
  --stage-inset: clamp(0px, 1.1vw, 1.25rem); /* how far stage cards sit from the frame edge */
  --frame-radius: 40px;
  --stage-radius: 32px;
  --card-radius: 18px;

  /* --- Header --- */
  --header-pad-y: clamp(1.4rem, 1.9vw, 1.85rem); /* top/bottom padding */
  --header-logo-h: 34px; /* logo drives header content height */
  /* trim 10% of the header height off the bottom, then re-add it above the
     page content so the header shrinks but its gap to the hero is unchanged */
  --header-trim: calc(0.1 * (var(--header-logo-h) + 2 * var(--header-pad-y)));

  /* --- Buttons: ONE size site-wide --- */
  --btn-py: 0.7rem;
  --btn-px: 1.25rem;
  --btn-fs: 0.9rem;
  --btn-radius: 100px;
  --btn-weight: 600;

  /* --- Motion --- */
  --ease: cubic-bezier(0.19, 1, 0.22, 1); /* expo-out */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-entrance: 1.1s;
  --dur-hover: 0.45s;

  /* --- Elevation --- */
  --shadow-frame: 0 50px 130px -50px rgba(4, 39, 64, 0.3);
  --shadow-card: 0 24px 60px -34px rgba(4, 39, 64, 0.3);
  --shadow-soft: 0 8px 26px -16px rgba(4, 39, 64, 0.4);
  --shadow-glow: 0 20px 60px -24px rgba(30, 164, 214, 0.5);
}