/* ============================================================
   TOKENS — Single source of truth for the entire design system.
   Every color, font, spacing value, radius, and shadow lives here.
   All other CSS files consume these variables — never hardcode values.
   ============================================================ */

/* ----------------------------------------------------------
   SELF-HOSTED FONTS
   To activate: download fonts from Google Fonts, place in
   assets/fonts/, uncomment these @font-face blocks, then
   remove the Google Fonts <link> from index.html.
   ---------------------------------------------------------- */
/*
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* ----------------------------------------------------------
     COLOR — Base (warm paper tones)
     ---------------------------------------------------------- */
  --paper:        #F5EFE4;   /* main background — aged paper */
  --cream:        #FBF7EF;   /* secondary surfaces */
  --linen:        #ECE3D2;   /* card backgrounds */

  /* ----------------------------------------------------------
     COLOR — Ink (never pure black — always warm)
     ---------------------------------------------------------- */
  --ink:          #2A2520;   /* primary text */
  --ink-soft:     #5C544A;   /* secondary text */
  --ink-mute:     #8A8074;   /* muted labels */

  /* ----------------------------------------------------------
     COLOR — Accents — now aligned with XXI Gasyr logo palette
     ---------------------------------------------------------- */
  --clay:         #0D9DB8;   /* calmed logo cyan  — primary CTA, buttons, active states */
  --rose:         #C2578A;   /* calmed logo pink  — italic accent words in headings     */
  --moss:         #4A9A38;   /* calmed logo green — botanical / nature elements         */
  --sun:          #E8B547;   /* warm honey        — highlights only (unchanged)         */

  /* ----------------------------------------------------------
     COLOR — Soft tints (light background washes)
     ---------------------------------------------------------- */
  --clay-soft:    #CEEDF5;   /* light cyan wash  */
  --rose-soft:    #F7D9EB;   /* light pink wash  */
  --moss-soft:    #D0EBC7;   /* light green wash */
  --sun-soft:     #F7E8C4;   /* light honey wash (unchanged) */

  /* ----------------------------------------------------------
     COLOR — Borders
     ---------------------------------------------------------- */
  --line:         #D9CDB6;   /* default border */
  --line-strong:  #B8A98A;   /* emphasized border */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font stacks
     ---------------------------------------------------------- */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', 'Nunito Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Fluid type scale
     Values: clamp(min, fluid, max) matching the spec
     ---------------------------------------------------------- */
  --text-display-xl: clamp(3.5rem, 8vw, 7rem);     /* 56px → 112px, lh 0.95 */
  --text-display:    clamp(2.5rem, 5vw, 4.5rem);    /* 40px → 72px,  lh 1.05 */
  --text-h2:         clamp(2rem, 4vw, 3.5rem);      /* 32px → 56px,  lh 1.1  */
  --text-h3:         1.75rem;                        /* 28px,          lh 1.2  */
  --text-body-l:     1.1875rem;                      /* 19px,          lh 1.65 */
  --text-body:       1rem;                           /* 16px,          lh 1.6  */
  --text-small:      0.875rem;                       /* 14px,          lh 1.5  */
  --text-micro:      0.75rem;                        /* 12px,          ls 0.12em */

  /* ----------------------------------------------------------
     SPACING — 8px base grid
     ---------------------------------------------------------- */
  --space-1:   0.25rem;    /*   4px */
  --space-2:   0.5rem;     /*   8px */
  --space-3:   1rem;       /*  16px */
  --space-4:   1.5rem;     /*  24px */
  --space-5:   2rem;       /*  32px */
  --space-6:   3rem;       /*  48px */
  --space-7:   4rem;       /*  64px */
  --space-8:   6rem;       /*  96px */
  --space-9:   8rem;       /* 128px */
  --space-10:  12rem;      /* 192px */

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-soft: 0 2px 12px rgba(42, 37, 32, 0.06);
  --shadow-card: 0 8px 32px rgba(42, 37, 32, 0.08);
  --shadow-lift: 0 16px 48px rgba(42, 37, 32, 0.12);

  /* ----------------------------------------------------------
     TRANSITIONS — standard easing curves
     ---------------------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;
  --dur-base:  300ms;
  --dur-slow:  700ms;

  /* ----------------------------------------------------------
     LAYOUT — container and section sizing
     ---------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 1.5rem);  /* 16px → 24px, fluid */
  --section-pad:   var(--space-8);              /* 96px top and bottom */

  /* ----------------------------------------------------------
     TEXTURE — SVG fractal noise at 4% opacity
     Used as second background-image layer on body to simulate
     subtle paper grain without a network request.
     ---------------------------------------------------------- */
  --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}