@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap&font-display=swap');

:root {
  /* ── Colors ── */
  --color-bg:               #FAFAF8;
  --color-surface:          #F3F2EF;
  --color-border:           #E4E2DE;
  --color-border-subtle:    #EEECE9;

  --color-text-primary:     #1C1B19;
  --color-text-secondary:   #6B6864;
  --color-text-tertiary:    #706E6C;  /* darkened: passes 4.5:1 on --color-bg */

  --color-accent:           #8A40C3;
  --color-accent-muted:     #F1E8FA;
  --color-accent-hover:     #722FA6;

  /* Grain texture for grainy-text effect (layer over a solid color) */
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --hero-text-gradient: linear-gradient(135deg, #654ea3 0%, #eaafc8 100%);
  --hero-text-fallback: #654ea3;

  /* ── Typography ── */
  --font:                   'DM Sans', sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-title: 1.25rem;    /* 20px */
  --text-xl:    1.375rem;   /* 22px */
  --text-2xl:   1.75rem;    /* 28px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;

  --leading-tight:    1.15;
  --leading-snug:     1.35;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

  --tracking-tight:   -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.1em;

  /* ── Spacing (8pt grid) ── */
  --sp-1:   8px;
  --sp-2:   16px;
  --sp-3:   24px;
  --sp-4:   32px;
  --sp-5:   40px;
  --sp-6:   48px;
  --sp-8:   64px;
  --sp-10:  80px;
  --sp-12:  96px;
  --sp-16:  128px;
  --sp-20:  160px;

  /* ── Layout ── */
  --container-max:      1400px;
  --container-padding:  clamp(24px, 5vw, 64px);
  --nav-height:         64px;

  /* ── Radius ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  /* ── Transitions ── */
  --ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --duration:   200ms;
  --duration-md: 400ms;
  --duration-lg: 350ms;
}