/* ==========================================================================
   Design tokens — Samadara Ginige website
   Source of truth: CLAUDE.md (palette, type scale, glass button spec)
   Do not hardcode these hex values anywhere else — reference the variables.
   ========================================================================== */

:root {
  /* Palette */
  --colour-bg: #F6F3EE;       /* cream — primary canvas, never pure white */
  --colour-ink: #3A3F43;      /* charcoal navy — text, nav fill, darkest tone in the palette */
  --colour-accent: #7B94AF;   /* dusty blue — the single recurring accent */
  --colour-card: #FFFFFF;     /* card surfaces elevated above the cream bg */

  /* Accent at common opacities (glass fills, badges, hovers) */
  --colour-accent-35: rgba(123, 148, 175, 0.35);
  --colour-accent-40: rgba(123, 148, 175, 0.40);
  --colour-accent-45: rgba(123, 148, 175, 0.45);
  --colour-accent-55: rgba(123, 148, 175, 0.55);

  --colour-ink-12: rgba(58, 63, 67, 0.12);
  --colour-ink-50: rgba(58, 63, 67, 0.50);

  /* Client mark colours — use ONLY within case-study / gallery contexts, never site chrome */
  --mark-gogoponi: #1E4E31;
  --mark-cinnalon: #6E3A1A;
  --mark-heartwise: #D9701F;
  --mark-heartwise-tail: #F0A15C;

  /* Fonts (Adobe Typekit kit: https://use.typekit.net/iev8fgl.css) */
  --font-display: 'area-variable', sans-serif;         /* page titles */
  --font-ui: 'neue-haas-grotesk-display', sans-serif;  /* headlines / UI / buttons / labels */
  --font-body: 'elza-text', sans-serif;                /* running body copy */

  /* Global letter-spacing for interactive text */
  --tracking-interactive: 0.07em;

  /* GLOBAL TYPE SCALE — mobile-first, from CLAUDE.md */
  --size-page-title: min(2.5rem, 4.8cqw, 3.8dvh);
  --size-hero-headline: min(5.5rem, 11cqw, 6.4dvh);
  --size-body: min(1rem, 4.6cqw, 2.8dvh);
  --size-prompt: calc(min(0.95rem, 4.2cqw, 2.5dvh) + 1pt);
  --size-button: calc(min(1rem, 4.6cqw, 2.8dvh) - 0.5pt);

  /* Layout */
  --content-max-width: 1200px;
  --text-max-width: 680px;
  --mobile-guide-width: 390px;
  --mobile-content-width: 350px;
  --breakpoint-desktop: 760px;

  /* Radii / shadows */
  --radius-button: 14px;
  --radius-card: 14px;
  --shadow-glass: 0 10px 26px rgba(58, 63, 67, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-glass-hover: 0 14px 32px rgba(58, 63, 67, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}