/* Design tokens — mirrors the variables in the Figma design system
   (file "Adrianatt-New", collections Primitives / Color / Layout).
   Names match each Figma variable's WEB code syntax, so a change in Figma
   maps to one line here. */

:root {
  /* Primitives — raw values, referenced only by the semantic tokens below */
  --prim-ink-900: #2b2b26;
  --prim-ink-600: #5f5b52;
  --prim-ink-alpha-14: rgba(43, 43, 38, 0.14);
  --prim-ink-alpha-08: rgba(43, 43, 38, 0.08);
  --prim-teal-700: #117a85;
  --prim-teal-600: #168b97;
  --prim-teal-200: #afdade;
  --prim-teal-alpha-18: rgba(22, 139, 151, 0.18);
  --prim-cream-50: #fdf9f5;
  --prim-cream-100: #fef8f2;
  --prim-peach-100: #fde9d4;
  --prim-neutral-100: #f3f4f2;
  --prim-white: #ffffff;

  /* Color — backgrounds */
  --color-bg-page: var(--prim-cream-50);
  --color-bg-surface: var(--prim-white);
  --color-bg-surface-muted: var(--prim-neutral-100);
  --color-bg-figure: var(--prim-cream-100);
  --color-bg-inverse: var(--prim-ink-900);
  --color-bg-accent: var(--prim-teal-600);
  --color-bg-glow-teal: var(--prim-teal-200);
  --color-bg-glow-peach: var(--prim-peach-100);

  /* Color — text. Accent text uses teal-700 (4.5:1+ on cream/white);
     teal-600 is for decorative marks only. */
  --color-text-primary: var(--prim-ink-900);
  --color-text-secondary: var(--prim-ink-600);
  --color-text-accent: var(--prim-teal-700);
  --color-text-inverse: var(--prim-cream-100);

  /* Color — borders */
  --color-border-strong: var(--prim-ink-900);
  --color-border-subtle: var(--prim-ink-alpha-14);
  --color-border-faint: var(--prim-ink-alpha-08);
  --color-border-accent-subtle: var(--prim-teal-alpha-18);
  --color-border-surface: var(--prim-white);

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* Radius */
  --radius-button: 6px;
  --radius-sm: 10px;
  --radius-nav: 12px;
  --radius-md: 16px;
  --radius-card: 24px;
  --radius-xl: 36px;
  --radius-full: 999px;

  /* Effects — Figma effect styles Shadow/* */
  --shadow-card: 0 0 6px rgba(0, 0, 0, 0.15);
  --shadow-nav: 0 8px 32px rgba(23, 77, 84, 0.08);
  --shadow-raised: 0 16px 48px rgba(23, 77, 84, 0.1);
  --shadow-photo: 0 24px 60px rgba(23, 77, 84, 0.16);

  /* Typography — every Figma text style uses Pliant */
  --font-sans: 'Pliant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}