/* ============================================================
   WEDCONNECT SA — DESIGN TOKENS
   ------------------------------------------------------------
   Aesthetic: editorial, restrained, warm. Matches the tone of
   premium SA wedding publications — generous whitespace,
   confident serif display, muted palette anchored by champagne
   + charcoal, with a single warm accent (terracotta/gold).
   ============================================================ */

:root {

  /* ---------- Color: Neutrals ---------- */
  --color-white:        #FFFFFF;
  --color-paper:        #FDFBF7;   /* softer than white, for page bg alt */
  --color-champagne:    #F5EFE6;   /* primary brand background */
  --color-champagne-2:  #EBE2D3;   /* hover/border on champagne */
  --color-stone:        #E8E2D6;   /* card border / divider on paper */
  --color-bone:         #F9F5EE;   /* section alt background */

  --color-charcoal:     #2D2D2D;   /* ink / primary text */
  --color-ink:          #1A1A1A;   /* headings, stronger */
  --color-graphite:     #4A4A4A;   /* secondary text */
  --color-mid-grey:     #6B6B6B;   /* muted text / captions */
  --color-soft-grey:    #A8A8A8;   /* disabled / placeholder */
  --color-hairline:     rgba(0, 0, 0, 0.08);  /* borders */
  --color-hairline-strong: rgba(0, 0, 0, 0.14);

  /* ---------- Color: Brand accents ---------- */
  --color-accent:       #C9A87C;   /* warm gold — primary CTA / emphasis */
  --color-accent-hover: #B8966A;
  --color-accent-soft:  rgba(201, 168, 124, 0.12);
  --color-accent-deep:  #8A6D42;   /* for text on champagne */

  --color-blush:        #E8C7BE;   /* muted rose — wedding warmth */
  --color-blush-soft:   #F5E4DE;
  --color-blush-deep:   #B88478;

  --color-sage:         #A8B89E;   /* muted green — support accent */
  --color-sage-soft:    #DCE3D4;
  --color-sage-deep:    #6B7A5E;

  /* ---------- Color: Functional ---------- */
  --color-success:      #5A7A4F;
  --color-success-bg:   #E8EFE3;
  --color-warning:      #B8860B;
  --color-warning-bg:   #FAF1DC;
  --color-danger:       #A84A3D;
  --color-danger-bg:    #F5E2DE;
  --color-info:         #4A6B88;
  --color-info-bg:      #E3ECF3;

  /* ---------- Typography: Families ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typography: Scale ---------- */
  --fs-2xs:   0.688rem;   /* 11px — labels, badges */
  --fs-xs:    0.75rem;    /* 12px — captions */
  --fs-sm:    0.813rem;   /* 13px — fine print */
  --fs-base:  0.938rem;   /* 15px — body */
  --fs-md:    1rem;       /* 16px — prominent body */
  --fs-lg:    1.125rem;   /* 18px — lead / subtitles */
  --fs-xl:    1.375rem;   /* 22px — small heading */
  --fs-2xl:   1.75rem;    /* 28px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   4rem;       /* 64px — hero */
  --fs-6xl:   5rem;       /* 80px — extra-large display */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing ---------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-7:  2rem;      /* 32 */
  --space-8:  2.5rem;    /* 40 */
  --space-9:  3rem;      /* 48 */
  --space-10: 4rem;      /* 64 */
  --space-11: 5rem;      /* 80 */
  --space-12: 6rem;      /* 96 */
  --space-13: 8rem;      /* 128 */

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 960px;
  --container-prose: 720px;
  --container-pad-x: clamp(1rem, 3vw, 2rem);

  --sidebar-w: 260px;
  --filter-sidebar-w: 280px;

  /* ---------- Radius ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 3px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.10), 0 6px 12px rgba(0, 0, 0, 0.05);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0 0 0 3px rgba(201, 168, 124, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

}