/* ════════════════════════════════════════════════════
   Lady Networking v2 — Design Tokens
   The single source of truth for the visual system.
   Every component, every screen, every phase inherits
   from these variables.
   ════════════════════════════════════════════════════ */

:root {

  /* ─────────── Typography — families ─────────── */

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale (rem-based, 16px root) */
  --text-display-lg:  3.5rem;     /* 56px — hero moments */
  --text-display-md:  2.5rem;     /* 40px — screen titles */
  --text-heading-lg:  1.75rem;    /* 28px — section headings */
  --text-heading-md:  1.25rem;    /* 20px — card titles */
  --text-heading-sm:  1rem;       /* 16px — small headings */
  --text-body-lg:     1.125rem;   /* 18px — featured body */
  --text-body:        1rem;       /* 16px — default */
  --text-body-sm:     0.875rem;   /* 14px — secondary */
  --text-caption:     0.75rem;    /* 12px — meta, hints */
  --text-label:       0.6875rem;  /* 11px — eyebrow labels */

  /* Line height */
  --leading-tight:   1.1;     /* display */
  --leading-snug:    1.25;    /* headings */
  --leading-normal:  1.5;     /* short body */
  --leading-relaxed: 1.6;     /* default body */
  --leading-loose:   1.75;    /* long-form reading */

  /* Letter spacing — Vietnamese benefits from slightly tighter display, normal body */
  --tracking-tighter: -0.022em;
  --tracking-tight:   -0.012em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─────────── Color — primary purple ─────────── */
  /* Used with restraint: primary buttons, selected states, focus rings,
     brand accents. Never as a wash. Never as a gradient over whole screens. */

  --color-purple-900: #2D0F5C;
  --color-purple-700: #4818AE;
  --color-purple-500: #6B21E8;  /* Brand */
  --color-purple-300: #B49EFB;
  --color-purple-100: #ECE5FE;
  --color-purple-50:  #F6F2FF;

  /* ─────────── Color — cream / warm whites ─────────── */
  /* The canvas. Most surfaces live here. Subtle warmth — never sterile. */

  --color-cream-50:   #FFFCF7;   /* Page background (warmest) */
  --color-cream-100:  #FBF6EE;   /* Card / surface tint */
  --color-cream-200:  #F3ECDF;   /* Subtle dividers, recessed wells */
  --color-cream-300:  #E7DCC9;   /* Stronger divider, button outline tint */
  --color-white:      #FFFFFF;   /* Pure — for crisp cards on cream */

  /* ─────────── Color — ink (warm greys, text) ─────────── */
  /* Greys with a slight warm undertone. Avoid cold neutrals. */

  --color-ink-900:    #1B1410;   /* Primary text — warm near-black */
  --color-ink-700:    #3F302A;   /* Strong body */
  --color-ink-500:    #6E5A4F;   /* Secondary text */
  --color-ink-400:    #94816F;   /* Muted */
  --color-ink-300:    #BDAB97;   /* Placeholder, disabled text */
  --color-ink-200:    #DCCFBC;   /* Strong divider */
  --color-ink-100:    #EBE0CF;   /* Subtle divider */

  /* ─────────── Color — soft semantic accents ─────────── */
  /* Muted, never neon. They whisper, not shout. */

  --color-success:    #5E8A75;   /* Warm sage */
  --color-success-bg: #E1ECE6;
  --color-warning:    #BF8E4A;   /* Warm amber */
  --color-warning-bg: #FAF0DC;
  --color-error:      #B05444;   /* Soft terracotta */
  --color-error-bg:   #F5DDD6;
  --color-info:       #5C7794;   /* Soft slate */
  --color-info-bg:    #E0E7EE;

  /* ─────────── Spacing scale (4px base) ─────────── */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* ─────────── Icons ─────────── */
  /* SVG line icons defined as <symbol>s in design-system.html.
     Reference from any phase: <svg class="icon"><use href="#icon-home"/></svg>
     Icons inherit color from currentColor — set `color` on the parent. */

  --icon-size:    24px;   /* Default — nav, inline icons */
  --icon-size-sm: 20px;   /* Inside small buttons */
  --icon-size-lg: 28px;   /* Empty states, hero callouts */
  --icon-stroke:  1.75;   /* Stroke width — between Phosphor Light and Lucide */

  /* ─────────── Border radius ─────────── */
  /* Slightly rounded — warm, not harsh. Never hard 0 except in dividers. */

  --radius-sm:   6px;    /* Inputs, small chips */
  --radius-md:   10px;   /* Buttons, smaller cards */
  --radius-lg:   14px;   /* Standard cards */
  --radius-xl:   20px;   /* Featured cards */
  --radius-2xl:  28px;   /* Sheets, modals */
  --radius-full: 9999px; /* Pills, avatars, toggles */

  /* ─────────── Elevation — warm-tinted shadows ─────────── */
  /* Shadows use a warm brown undertone instead of pure black.
     Echoes the cream surface; never feels cold or floating. */

  --shadow-xs: 0 1px 2px rgba(60, 38, 24, 0.04);
  --shadow-sm: 0 2px 6px rgba(60, 38, 24, 0.05);
  --shadow-md: 0 4px 14px rgba(60, 38, 24, 0.06);
  --shadow-lg: 0 8px 28px rgba(60, 38, 24, 0.08);
  --shadow-xl: 0 18px 56px rgba(60, 38, 24, 0.10);

  /* Reserved for brand-elevated elements (primary CTA, gift cards) */
  --shadow-purple-sm: 0 4px 14px rgba(107, 33, 232, 0.18);
  --shadow-purple-md: 0 10px 30px rgba(107, 33, 232, 0.22);

  /* ─────────── Motion ─────────── */

  --duration-fast: 150ms;   /* Hover, small state changes */
  --duration-base: 250ms;   /* Default — most transitions */
  --duration-slow: 400ms;   /* Sheets, screen transitions, reveals */

  /* Warm easing — slightly slow start, gentle settle */
  --ease-warm:   cubic-bezier(0.32, 0.72, 0.32, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ─────────── Layout ─────────── */

  --touch-target:     44px;     /* Minimum tap target (WCAG) */
  --container-narrow: 480px;    /* Mobile-first content width */
  --container-text:   680px;    /* Comfortable reading measure */
  --container-wide:   960px;    /* Marketing / showcase pages */

  /* ─────────── Focus ring ─────────── */
  /* Always visible. Always purple. Never removed. */

  --ring-color:   var(--color-purple-500);
  --ring-offset:  2px;
  --ring-width:   2px;
}

/* ════════════════════════════════════════════════════
   Icon utility — pairs with the SVG sprite
   defined as <symbol>s in design-system.html.
   ════════════════════════════════════════════════════ */

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
}

.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* ════════════════════════════════════════════════════
   Optional: dark surface tokens (placeholder for future)
   Lady Networking will be light-first. Dark mode is a
   later consideration, not a launch requirement.
   ════════════════════════════════════════════════════ */