/* Cay Digital — Design Tokens (clone of live caydigital.ai)
   Values sampled directly from the live Webflow CSS, NOT from Brand assets/DESIGN.md.
   DESIGN.md says "dark-first" but the live site is light-first with two contained
   colored panels — until DESIGN.md is reconciled, the live site wins for this clone. */

:root {
  /* Color — light-first (matches live --_colours--*) */
  --c-bg: #FFFFFF;
  --c-text: #1F1F1F;
  --c-secondary: #FFFFFF;          /* on dark / lime panels */
  --c-accent: #6EFF95;             /* live --_colours---green — for use on dark bgs */
  --c-accent-dark: #1F8A48;        /* deeper green for accent TEXT on light/white bgs (~5.5:1 contrast) */
  --c-navbar: #1C1C1C;             /* dark panel + footer */
  --c-footer: #191919;
  --c-link: #FFB887;               /* brand orange — was Webflow blue #1155CC. Green (--c-accent) is reserved for dark bgs only. */

  /* Extended brand palette (article/document surfaces) */
  --c-mint: #6AFF93;               /* signature mint, used in editorial contexts */
  --c-teal: #00D9A6;               /* gradient endpoint w/ mint */
  --c-orange: #FFB887;             /* secondary editorial accent */
  --c-coral: #FF5C39;
  --c-dark: #1F1F1F;
  --c-deep-dark: #1A1620;
  --c-off-white: #F5F5F5;
  --c-mid-gray: #9E9E9E;
  --c-light-gray: #CCCCCC;
  --c-border-dark: #333333;

  /* Type */
  --f-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Type scale — matched to live Webflow values */
  --fs-hero: 80px;          /* mainwhitetitle desktop */
  --fs-hero-mobile: 55px;
  --fs-section: 58px;       /* smallsectiontitle desktop */
  --fs-section-mobile: 50px;
  --fs-card-title: 23px;    /* title-32 */
  --fs-subtitle: 24px;      /* hero subtitle */
  --fs-body: 19px;          /* ourofferingsdesctriptionparagraph, text-link, button-3 */
  --fs-body-sm: 16px;
  --fs-nav: 19px;           /* navitemlink */

  --lh-hero: 100px;
  --lh-hero-mobile: 64px;
  --lh-section: 65px;
  --lh-section-mobile: 60px;
  --lh-subtitle: 30px;
  --lh-body: 28px;
  --lh-body-sm: 22px;

  /* Layout */
  --container-max: 1300px;
  --gutter: clamp(1.25rem, 4vw, 36px);

  /* Radius / motion */
  --r-sm: 0;          /* matches live button border radius */
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 0;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
}