/* ===========================================================================
   JUST CREATE — the design tokens
   ---------------------------------------------------------------------------
   EVERY COLOUR IN THIS FILE WAS SAMPLED OUT OF THEIR ACTUAL LOGO
   (brand-source/logo-original.jpg), not chosen to go with it. The logo is a
   WATERCOLOUR — a blue-green globe bursting with foliage, on white paper — so
   the site is light, warm and papery. A dark site under this logo would fight
   it, and the artwork would have to sit in a white box on every page, which is
   how a watercolour brand ends up looking like a stock image on a template.

   The sampling run, most saturated first:
       #1E648C #286E96 #5AA0C8   the deep ocean and its shadows
       #6EB4D2 #78BEDC #AADCF0   the shallows and the sky wash
       #A0C85A #AAD264 #B4C882   the leaves
       #AABE78 #D2E6A0           the sage and the palest wash
       #1A1A1A                   the brush lettering

   Tokens are ROLE-named, not colour-named, so the day a colour changes it
   changes in one place and nothing has to be found and replaced.
   ========================================================================= */

:root {
  /* ---- paper ----------------------------------------------------------- */
  --paper:       #FDFCF8;   /* the page — warm white, not screen white     */
  --paper-2:     #F5F3EC;   /* alternating bands, cards                    */
  --paper-3:     #EDEFE6;   /* raised, hover, table stripes                */
  --paper-tint:  #EAF4F8;   /* the palest wash of the sky, for callouts    */
  --white:       #FFFFFF;

  --hairline:    #E2E0D6;   /* rules and card edges                        */
  --hairline-2:  #CFCEC1;   /* a rule that needs to be seen                */

  /* ---- ink ------------------------------------------------------------- */
  /* ⚠ NOT the logo's pure #1A1A1A for body copy. Pure black on warm paper
     glares; this is the same hue pulled a little toward the ocean so the
     page reads as one thing. The lettering colour is kept for headings. */
  --ink:         #1F2A2E;   /* headings                                     */
  --ink-body:    #3D4A4E;   /* paragraphs                                   */
  --ink-muted:   #667377;   /* captions, meta, secondary labels             */
  --ink-faint:   #939C9E;   /* disabled, placeholder                        */

  /* ---- the water ------------------------------------------------------- */
  --ocean:       #1E648C;   /* the primary. Buttons, links, the date chip   */
  --ocean-deep:  #16506F;   /* hover, and text that must clear 4.5:1        */
  --ocean-mid:   #5AA0C8;
  --sky:         #AADCF0;
  --sky-wash:    #E4F3FA;

  /* ---- the leaves ------------------------------------------------------ */
  --leaf:        #7FA83C;   /* the second accent — used sparingly           */
  --leaf-deep:   #5E7F2A;   /* the readable version of it on paper          */
  --leaf-light:  #C6DE96;
  --leaf-wash:   #EFF5E2;
  --sage:        #AABE78;

  /* ⚠ TEXT ON --ocean OR --leaf-deep IS --white; text on --sky, --leaf-light
     or any wash is --ink. Getting this backwards is the one contrast mistake
     a light palette makes, and there is a test that reads these pairings. */
  --on-ocean:    #FFFFFF;
  --on-sky:      #1F2A2E;

  /* ---- states ---------------------------------------------------------- */
  /* ⚠ DARKENED FROM #B4762A, WHICH FAILED. That amber is a perfectly nice
     colour and it was also 3.77:1 behind the white text of the "3 places
     left" badge — under the 4.5:1 small text needs. It was found by
     tools/check-hero-contrast.mjs sampling the real rendered pixels, not by
     looking, because a warm badge on a pale flyer looks fine to somebody who
     already knows what it says. This one is 4.76:1 on white and 4.63:1 as
     text on paper, so it works both as a fill and as a colour. */
  --warn:        #A0661F;
  --danger:      #A8442F;
  --good:        #4C7F4F;

  /* ---- type ------------------------------------------------------------ */
  /* ⚠ THE SCRIPT IS FOR THE NAME AND NOTHING ELSE. See fonts.css. */
  --script: 'Kaushan Script', 'Brush Script MT', cursive;
  --display: 'Quicksand', 'Trebuchet MS', -apple-system, sans-serif;
  --body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --track-wide: .14em;
  --track-mid:  .04em;

  /* ---- measure --------------------------------------------------------- */
  --page: 1180px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --rhythm: clamp(3rem, 7vw, 6rem);

  /* Soft. A watercolour has no hard edges anywhere in it, and a craft class
     is a friendly thing to book — the corners say so before any of the words
     do. This is the opposite of the sibling gym-wear build on purpose. */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  /* On light paper a shadow works, unlike on a dark page. Kept soft and
     cool-tinted so it reads as depth rather than as a drop shadow. */
  --shadow: 0 2px 4px rgba(31, 42, 46, .04), 0 12px 28px -12px rgba(30, 100, 140, .18);
  --shadow-lift: 0 4px 8px rgba(31, 42, 46, .06), 0 22px 44px -16px rgba(30, 100, 140, .26);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --quick: .18s var(--ease);
  --slow:  .45s var(--ease);
}

/* [hidden] HAS TO WIN. Several components here set `display` on a class — the
   class card is a grid, the badge is inline-flex — and a class beats the
   browser's own `[hidden] { display: none }`. Without this, hiding an element
   from JavaScript silently does nothing, and it does it with no error. */
[hidden] { display: none !important; }

/* The site is light and stays light — the logo is a watercolour on white
   paper and there is no honest dark version of it. Declared so the browser
   paints form controls and scrollbars to match rather than guessing. */
:root { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}