/* ==========================================================================
   DESIGN TOKENS
   The single place to change colours, type, spacing and motion.
   Everything else in the stylesheet reads from these variables.
   ========================================================================== */

:root {
  /* ---- Brand palette (sampled from the Fractional & Co. logo) ---------- */
  --ink:            #282F2A;   /* deep olive-charcoal: headlines, wordmark      */
  --ink-soft:       #464E48;   /* body copy                                     */
  --ink-muted:      #6B6F68;   /* captions, meta                                */
  --coral:          #ED7B65;   /* logo coral: shapes, illustration, accents     */
  --clay:           #B04E38;   /* accessible coral: buttons, small accent text  */
  --clay-deep:      #8E3B28;   /* hover / pressed                               */
  --blush:          #F0D8C6;   /* logo circle                                   */
  --blush-soft:     #F7E6DA;
  --sage:           #8B946F;   /* secondary natural accent (olive leaves)       */
  --olive:          #5D6A47;
  --paper:          #FFFAF4;   /* card paper                                    */
  --line:           rgba(40, 47, 42, 0.14);
  --line-strong:    rgba(40, 47, 42, 0.28);

  /* ---- "A day, reclaimed": section skies from dawn to night ------------ */
  --sky-dawn:       #F7EFE6;
  --sky-morning:    #FCF6EF;
  --sky-noon:       #FFF9F3;
  --sky-afternoon:  #FBEEE2;
  --sky-late:       #F8E3D0;
  --sky-golden:     #F4D4B9;
  --sky-sunset:     #EDB39C;
  --sky-dusk:       #7E5660;
  --sky-night:      #262230;
  --sky-midnight:   #1C1A23;
  --on-night:       #F6EBDD;

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-script:  "Mrs Saint Delafield", "Snell Roundhand", cursive;

  /* fluid type scale (min @ 360px → max @ 1440px) */
  --step--2: 0.74rem;
  --step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.18vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.45rem, 1.7rem + 3.5vw, 4.7rem);
  --step-5:  clamp(2.9rem, 1.65rem + 5.6vw, 6.6rem);
  --step-6:  clamp(5rem, 3rem + 9vw, 11rem);

  /* ---- Space & layout ---------------------------------------------------- */
  --gutter:   clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --section:  clamp(5.5rem, 3.5rem + 9vw, 11rem);
  --maxw:     1320px;
  --measure:  36rem;
  --nav-h:    clamp(4rem, 3.4rem + 1.6vw, 5.25rem);
  --radius:   18px;
  --arch:     999px 999px 0 0;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:   0.35s;
  --dur:        0.8s;
  --dur-slow:   1.4s;

  /* ---- Shadows (used sparingly) ----------------------------------------- */
  --shadow-paper: 0 1px 1px rgba(60, 40, 25, 0.04),
                  0 10px 30px -12px rgba(80, 50, 30, 0.22),
                  0 30px 60px -30px rgba(80, 50, 30, 0.25);
}