/* ==========================================================================
   tokens.css: the design system for Rudo Studio
   Every colour, font and size used on the portfolio is defined here, once.
   Look: sky-teal on white with a soft blush accent (inspired by Hawthorn Creative).
   ========================================================================== */

:root {
  /* ---- Colours ---- */
  --color-teal:        #4DB3D0;   /* main accent for highlights, lines and shapes (too light for text) */
  --color-teal-deep:   #267891;   /* teal for text and solid buttons: passes WCAG AA (4.5:1) on white and mist */
  --color-teal-mist:   #D9EEF2;   /* pale teal blocks behind numbers */
  --color-blush:       #F6D5D1;   /* warm second accent, used sparingly */
  --color-blush-deep:  #D9848F;
  --color-white:       #FFFFFF;
  --color-mist:        #F4F5F6;   /* light grey section backgrounds */
  --color-line:        #DADEE2;   /* borders and thin rules */
  --color-ink:         #1D1D1F;   /* main text */
  --color-ink-soft:    #5E6A73;   /* secondary text */
  --color-ink-faint:   #686F76;   /* captions, labels: passes WCAG AA on white and mist */
  --color-overlay:     rgba(15, 20, 24, 0.45);   /* darkens hero photos under white text */

  /* ---- Fonts ---- */
  --font-sans:  "Figtree", "Segoe UI", system-ui, sans-serif;          /* headlines and text */
  --font-serif: "Cormorant", "Cormorant Garamond", Georgia, serif;     /* elegant accents, spaced capitals */

  /* ---- Type sizes (fluid: grow smoothly from phone to desktop) ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-hero: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --text-giant: clamp(2.5rem, 0.8rem + 6vw, 6.5rem);   /* the changing big word */

  /* ---- 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(4.5rem, 3rem + 6vw, 9rem);

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

  /* ---- Shape & motion ---- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --shadow-soft: 0 24px 60px -24px rgba(29, 29, 31, 0.28);
  --shadow-device: 0 40px 80px -30px rgba(29, 29, 31, 0.45);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.9s;
}