/* ============================================================
   HAUSEFUL DESIGN SYSTEM — Colors & Typography
   Primary: Poppins (headings) + Nunito (body)
   Brand colors: Blue #22566E / Pink #F37B76
   ============================================================ */

/* ── Local Fonts: only the weights actually used on this page ──
   (full family set trimmed from 30 files to 4 for page-weight/SEO) */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/Nunitoregular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

/* ── Color Tokens ── */
:root {
  /* Brand Primary */
  --color-blue:           #22566E;   /* Primary blue — logo, CTAs, nav */
  --color-blue-dark:      #1a4257;   /* Hover/pressed blue */
  --color-blue-light:     #2d6f8f;   /* Light variant */
  --color-blue-tint:      #E6F9FE;   /* Very light blue tint — header bg */

  --color-pink:           #F37B76;   /* Primary coral/pink */
  --color-pink-dark:      #d9625d;   /* Hover/pressed pink */
  --color-pink-light:     #f5918d;   /* Light variant */
  --color-pink-tint:      #FEF0EF;   /* Very light pink tint */

  /* Neutrals */
  --color-bg:             #FBFBFD;   /* App background — near white, cool */
  --color-surface:        #FFFFFF;   /* Pure white surfaces */
  --color-surface-raised: #F4F5F7;   /* Elevated card/section bg */
  --color-surface-overlay:#F0F1F3;   /* Overlay bg, inputs */

  --color-gray-50:        #F9FAFB;
  --color-gray-100:       #F2F4F6;
  --color-gray-200:       #EBEFF2;   /* Separator rgb(235,239,242) */
  --color-gray-300:       #D1D5DB;
  --color-gray-400:       #ABB1B7;   /* Placeholder / muted rgb(171,177,183) */
  --color-gray-500:       #6B7280;
  --color-gray-600:       #4E4E4E;   /* Body text rgb(78,78,78) */
  --color-gray-700:       #374151;
  --color-gray-900:       #111827;   /* Headings dark */

  /* Semantic */
  --color-fg-primary:     var(--color-gray-900);
  --color-fg-secondary:   var(--color-gray-600);
  --color-fg-muted:       var(--color-gray-400);
  --color-fg-inverse:     #FFFFFF;
  --color-fg-brand:       var(--color-blue);
  --color-fg-accent:      var(--color-pink);

  --color-border:         var(--color-gray-200);
  --color-border-input:   var(--color-gray-400);
  --color-bg-page:        var(--color-bg);
  --color-bg-card:        var(--color-surface);

  /* Status */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           var(--color-blue);
}

/* ── Typography Scale ── */
:root {
  /* Font stacks */
  --font-heading:  'Poppins', sans-serif;
  --font-body:     'Nunito', sans-serif;

  /* Sizes */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Font weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.15em;
}

/* ── Semantic Type Styles ── */
h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}

h6, .h6 {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-fg-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-secondary);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-secondary);
}

.label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-muted);
}

/* ── Spacing Tokens ── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
}

/* ── Border Radius ── */
:root {
  --radius-sm:   4px;
  --radius-md:   6px;    /* inputs, buttons */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   20px;   /* sheets, modals */
  --radius-full: 9999px; /* pills, chips */
}

/* ── Shadows ── */
:root {
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:   0 0 24px rgba(0,0,0,0.14);
  --shadow-sheet: 0px 0px 12px 0px rgba(0,0,0,0.25);
}