/* ============================================================
   Prague Guitar Academy — design tokens
   ------------------------------------------------------------
   This is the only file you need to touch to restyle the site.
   Every colour, size and space below is used by name in
   styles.css. Nothing is hard-coded there.
   ============================================================ */

:root {

  /* --- Brand colours -------------------------------------
     Measured from the existing site. These four are the
     identity; everything else is derived from them.        */
  --pink:        #F61067;   /* buttons, links, accents      */
  --pink-dark:   #C50B51;   /* hover state, derived         */
  --black:       #000000;   /* section grounds              */
  --white:       #FFFFFF;
  --plum:        #4A1D2E;   /* alternate section ground     */

  /* --- Neutrals ------------------------------------------
     The old site inherited its greys from the theme.
     These are picked deliberately, tuned to the pink.      */
  --ink:         #1A1720;   /* body text on light           */
  --ink-soft:    #5A5563;   /* secondary text on light      */
  --on-dark:     #FFFFFF;   /* body text on dark            */
  --on-dark-soft:#C9C3CE;   /* secondary text on dark       */
  --rule:        #E4E0E8;   /* hairlines                    */
  --rule-strong: #EBEAED;   /* the story block's 2px border */
  --phone-icon:  #DBC0E9;   /* the phone glyph (pale lilac) */
  --star:        #FBBC04;   /* Google's star colour, reviews only */

  /* --- Price-card accents ---------------------------------
     Sampled from the original tuition PNGs, not eyeballed.
     #F61067 came back identical to --pink, which is the
     check that the sampling was right.                     */
  --card-ink:       #2B2B2B;   /* Intro + Single Session     */
  --card-purple:    #A359A0;   /* 8 Sessions                 */
  --card-pink-soft: #F7669D;   /* 4 Sessions                 */
  --card-plum-deep: #501C30;   /* Semester, gradient start   */
  --card-pink-hot:  #F01065;   /* Semester, gradient end     */

  /* Soft pink ground for the guidance note. Same hue family as
     --pink, lightened until body text sits on it comfortably. */
  --pink-tint:      #FDE7EF;

  /* --- Type ----------------------------------------------- */
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --w-regular: 400;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* NOTE: the content sizes below are FLAT, not fluid. Elementor
     sets one size per breakpoint and the live site uses the same
     value on a phone as on desktop for body and heading text —
     only --t-nav (nav + buttons) actually shrinks. Measured at
     375px on the live site: h2 36, h3 26, card 22, sub 24.

     Fluid scale: min at 320px, max at 1400px viewport.
     No breakpoints needed — these interpolate smoothly.
     Maximums are matched to the existing site, measured at
     1280px: hero 30, section headings 36, FAQ 26, body 16.  */
  --t-hero:  clamp(1.5rem,  1.28rem + 1.10vw, 1.875rem);  /*  24 → 30 */
  --t-h2:    2.25rem;                                     /*  36 flat — the live site keeps
                                                             section headings at 36px on a phone
                                                             too; ours was shrinking to 25. */
  --t-h3:    1.625rem;                                    /*  26 flat (measured on live) */
  --t-lead:  clamp(1.125rem,0.97rem + 0.78vw, 1.625rem);  /*  18 → 26 */
  --t-sub:   1.5rem;                                      /*  24 flat, measured on live */
  --t-body:  clamp(1rem,    0.99rem + 0.07vw, 1.0625rem); /*  16 → 17 */
  --t-nav:   clamp(0.75rem, 0.567rem + 0.78vw, 1.25rem);  /*  12 → 20  nav, button, phone
                                                             measured on the live site: 12px at
                                                             375px, 20px at desktop. It does NOT
                                                             scale down further on small phones. */
  --t-card:  1.375rem;                                    /*  22 flat  question + Q&A     */
  --t-ans:   1.125rem;                                    /*  18 flat  answers            */
  --t-benefit: 1.25rem;                                   /*  20 flat  benefit copy       */
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-tight: 1.15;
  --lh-head:  1.25;
  --lh-body:  1.65;

  /* --- Space ----------------------------------------------
     One fluid ramp. Section padding and gaps come from here,
     so vertical rhythm stays consistent at every width.    */
  --s-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --s-2xs: clamp(0.5rem,  0.47rem + 0.15vw, 0.625rem);
  --s-xs:  clamp(0.75rem, 0.70rem + 0.25vw, 0.95rem);
  --s-sm:  clamp(1rem,    0.93rem + 0.35vw, 1.25rem);
  --s-md:  clamp(1.5rem,  1.36rem + 0.70vw, 2rem);
  --s-lg:  clamp(2rem,    1.72rem + 1.40vw, 3.25rem);
  --s-xl:  clamp(3rem,    2.44rem + 2.80vw, 5.5rem);
  --s-2xl: clamp(4rem,    3.02rem + 4.90vw, 8rem);

  /* --- Layout --------------------------------------------- */
  --page:     1140px;  /* the main content column            */
  --page-wide:1402px;  /* the few full-bleed-ish sections    */
  --prose:    68ch;    /* readable line length for body copy */
  /* Elementor puts widgets 10px inside a 1140 container on desktop and
     ~20px in on phones, so this gutter shrinks as the viewport grows. */
  --gutter:   clamp(0.625rem, 1.43rem - 0.893vw, 1.25rem);

  --radius:      6px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px -6px rgb(0 0 0 / .12);
  --shadow-md: 0 2px 4px rgb(0 0 0 / .06), 0 12px 32px -12px rgb(0 0 0 / .22);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --fast: .18s;
  --slow: .32s;
}

/* Respect a reader who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}