/* ==========================================================================
   Beauld Communications
   tokens.css — the single source of truth for the brand.
   Change a value here and it propagates across every page.
   ========================================================================== */

:root {

  /* --- Brand colour -------------------------------------------------- */
  /* Sampled from the logo: the palm-in-circle mark is #ED1010, the
     "beauld comm." wordmark is pure black on white. Three colours, used
     with discipline — that restraint IS the brand. */

  --red:            #ED1010;  /* the mark's red — the one accent          */
  --red-deep:       #C10A0A;  /* hover / pressed                          */
  --red-dark:       #8E0808;  /* red text on white, clears AA at 7.0:1    */
  --red-pale:       #FDECEC;  /* tint fills                               */

  --ink:            #0A0A0A;  /* primary text, and the dark sections      */
  --ink-soft:       #2E2E2E;  /* secondary text                           */
  --slate:          #5E5E5E;  /* meta, captions — 6.4:1 on white          */
  --slate-light:    #8C8C8C;  /* hairline text, placeholders              */

  --paper:          #FFFFFF;  /* page ground                              */
  --paper-warm:     #F6F5F3;  /* alternating band                         */
  --paper-dim:      #EDEBE8;  /* cards on the warm band                   */

  /* On the black sections, text steps down instead of up — pure white for
     headings, a soft grey for body so the page does not glare. */
  --on-ink:         #FFFFFF;
  --on-ink-soft:    #B9B9B9;
  --on-ink-dim:     #7A7A7A;

  --line:           rgba(10, 10, 10, 0.12);   /* hairline on white        */
  --line-strong:    rgba(10, 10, 10, 0.24);
  --line-on-ink:    rgba(255, 255, 255, 0.16);

  --focus:          #0A66FF;  /* focus ring — deliberately NOT the brand
                                 red, so it never reads as decoration      */

  /* --- Product colours ------------------------------------------------ */
  /* VYPΛ and edimulo are separate brands with their own equity, and their
     names are set in their own colours wherever they appear in text.
     Each needs two values: the brand colour itself only clears AA on one
     of the two grounds this site uses.

       VYPΛ blue   #0018FF   8.2:1 on white   2.4:1 on ink  -> tint for ink
       edimulo sun #FDBC3F  11.7:1 on ink     2.4:1 on white -> deepen for white  */

  --vypa:           #0018FF;  /* the mark's blue — on white               */
  --vypa-bright:    #5C7CFF;  /* the same hue lifted for black, 5.5:1     */

  --edimulo:        #B04E08;  /* the sun's darkest stop, deepened, 5.3:1  */
  --edimulo-bright: #FDBC3F;  /* the sun itself — on black, 11.7:1        */

  /* Small red text on the black bands measures 4.4:1, which clears AA for
     large type and fails it for a 12px eyebrow. Gold clears it at 13.8:1
     and gives the dark sections the warmth they were missing. */
  --gold:           #FFD34D;

  /* --- Type ----------------------------------------------------------- */
  /* Poppins is the closest widely-available match to the geometric
     lowercase of the wordmark; Inter carries the reading text. Both fall
     back to the system stack so the site survives a blocked CDN. */

  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* A fluid scale. Each step is clamp(min, preferred, max) so the page
     resizes continuously between 360px and 1440px with no breakpoint jumps
     in the type itself. */
  --t-xs:    0.75rem;                              /* 12px — eyebrows      */
  --t-sm:    0.8125rem;                            /* 13px — meta          */
  --t-base:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-xl:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-2xl:   clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --t-3xl:   clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --t-4xl:   clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem);
  --t-5xl:   clamp(2.75rem, 1.5rem + 5.6vw, 6.5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.65;

  /* Display type is set tight. At 4xl and up the default tracking opens the
     line up too much for a wordmark-led brand, so we pull it back. */
  --track-display: -0.028em;
  --track-eyebrow:  0.14em;

  /* --- Space ----------------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* Vertical rhythm between full-width sections, fluid like the type. */
  --band:      clamp(4rem, 3rem + 5vw, 8rem);
  --band-tight: clamp(3rem, 2.4rem + 3vw, 5rem);

  --gutter:    clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --measure:   68ch;        /* comfortable reading width                   */
  --wrap:      1240px;      /* outer container                             */
  --wrap-narrow: 880px;

  /* --- Form ------------------------------------------------------------ */
  /* The brand's geometry is circular (the mark) against a hard-edged
     wordmark. Cards stay square; only pills and the mark are round. */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06),
               0 2px 8px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 2px 4px rgba(10, 10, 10, 0.05),
               0 12px 32px rgba(10, 10, 10, 0.09);
  --shadow-lg: 0 4px 8px rgba(10, 10, 10, 0.06),
               0 24px 64px rgba(10, 10, 10, 0.14);

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.28s;
  --dur-slow:  0.6s;

  --header-h: 76px;
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}