/* ==========================================================================
   tokens.css — the design system for Charles & Shoma
   Every colour, font and size used on the site is defined here, once.
   Change a value here and it updates everywhere.
   ========================================================================== */

:root {
  /* ---- Colours: powder blue, navy and white, like a clear May sky ---- */
  --color-blue:        #B3C8DB;   /* the powder blue of their bands */
  --color-blue-light:  #EEF3F8;   /* soft section backgrounds */
  --color-blue-deep:   #2B5672;   /* blue for text, links and buttons */
  --color-navy:        #282936;   /* main text, headings */
  --color-teal:        #014D5F;
  --color-blush:       #FFF0EC;
  --color-white:       #FFFFFF;   /* page background */
  --color-ink:         #282936;   /* main text (same as navy) */
  --color-ink-soft:    #55576A;   /* secondary text */
  --color-line:        #DCE4EC;   /* borders and dividers */

  /* ---- Fonts ---- */
  --font-display: "Cormorant", "Cormorant Garamond", Georgia, serif;   /* headings, names */
  --font-body:    "Cormorant Garamond", Georgia, serif;               /* paragraphs */
  --font-script:  "Pinyon Script", "Brush Script MT", cursive;          /* script accents */

  /* ---- Type sizes (fluid: grow smoothly from phone to desktop) ---- */
  --text-sm:   1rem;
  --text-base: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  --text-lg:   clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --text-xl:   clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --text-2xl:  clamp(2.3rem, 1.6rem + 3.2vw, 4.2rem);
  --text-hero: clamp(3rem, 1.8rem + 5vw, 6.4rem);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 8rem);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-height: 76px;

  /* ---- Shape & motion ---- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --shadow-soft: 0 12px 40px -12px rgba(40, 41, 54, 0.22);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.9s;
}