/* =========================================================================
   Colore360 — Design Tokens
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@1,300;1,400;1,500;1,600&display=swap");

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --c-violet:  #7B2CBF;
  --c-magenta: #C8166C;
  --c-red:     #E63946;
  --c-orange:  #F39237;
  --c-yellow:  #F2C94C;
  --c-green:   #2FAE66;
  --c-teal:    #1FB6C1;
  --c-blue:    #2D6FE8;

  --brand-spectrum: conic-gradient(
    from 90deg,
    var(--c-violet) 0%,
    var(--c-magenta) 12%,
    var(--c-red) 24%,
    var(--c-orange) 36%,
    var(--c-yellow) 48%,
    var(--c-green) 64%,
    var(--c-teal) 78%,
    var(--c-blue) 92%,
    var(--c-violet) 100%
  );

  --ink:         #212529;
  --ink-2:       #3A3F45;
  --ink-3:       #6B7177;
  --ink-4:       #9CA1A6;
  --line:        #E6E7E9;
  --paper:       #F8F9FA;
  --paper-warm:  #F4F1EC;
  --paper-card:  #FFFFFF;
  --black:       #0B0B0C;

  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --bg:   var(--paper);

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-italic:  "Cormorant Garamond", "Times New Roman", serif;

  --weight-thin:    100;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

  --type-hero:    clamp(56px, 9vw, 152px);
  --type-display: clamp(44px, 7vw, 104px);
  --type-h1:      clamp(36px, 5vw, 72px);
  --type-h2:      clamp(28px, 3.5vw, 48px);
  --type-h3:      clamp(20px, 2vw, 30px);
  --type-eyebrow: 13px;
  --type-body-lg: 19px;
  --type-body:    16px;
  --type-small:   14px;

  --leading-tight:  1.02;
  --leading-snug:   1.10;
  --leading-prose:  1.65;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.18em;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 12px;
  --radius-4: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15,15,18,0.04), 0 0 0 1px rgba(15,15,18,0.04);
  --shadow-2: 0 6px 18px -8px rgba(15,15,18,0.18), 0 1px 3px rgba(15,15,18,0.06);
  --shadow-3: 0 24px 60px -24px rgba(15,15,18,0.28), 0 2px 6px rgba(15,15,18,0.06);

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   520ms;
  --dur-section: 900ms;

  --container-max: 1440px;
  --gutter: clamp(20px, 5vw, 80px);

  /* site-wide theme vars (updated by JS on scroll) */
  --site-bg: var(--paper);
  --site-fg: var(--ink);
  --site-accent: var(--c-teal);
}