/* ================================================================
   FRAMOS CABINETS — CSS Design Tokens
   ================================================================ */

:root {

  /* ── Brand Colors ──────────────────────────────────────────── */
  --navy:           #1a1a2e;
  --navy-mid:       #252545;
  --navy-light:     #2e2e52;
  --navy-900:       rgba(26, 26, 46, 0.95);
  --gold:           #c9a84c;
  --gold-dark:      #a8893c;
  --gold-tint:      #fdf8ee;
  --gold-pale:      rgba(201, 168, 76, 0.10);
  --gold-pale-2:    rgba(201, 168, 76, 0.18);
  --gold-border:    rgba(201, 168, 76, 0.30);
  --offwhite:       #f8f6f2;
  --offwhite-2:     #f0ede8;
  --white:          #ffffff;
  --dark:           #0f0f0f;
  --dark-mid:       #181818;
  --dark-border:    #2a2a3a;

  /* ── Text Colors ───────────────────────────────────────────── */
  --text-dark:        #0f0f0f;
  --text-body:        #4a4a5a;
  --text-muted:       #7a7a8a;
  --text-light:       #a0a0b0;
  --text-white:       #ffffff;
  --text-white-80:    rgba(255, 255, 255, 0.80);
  --text-white-60:    rgba(255, 255, 255, 0.60);
  --text-white-40:    rgba(255, 255, 255, 0.40);

  /* ── Status Colors ─────────────────────────────────────────── */
  --success:       #2d7a4f;
  --success-pale:  rgba(45, 122, 79, 0.10);
  --error:         #c0392b;
  --error-pale:    rgba(192, 57, 43, 0.10);

  /* ── Typography ────────────────────────────────────────────── */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

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

  /* ── Type Scale ────────────────────────────────────────────── */
  --text-xs:    0.6875rem;   /* 11px – section labels */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --text-md:    1.125rem;    /* 18px */
  --text-lg:    1.25rem;     /* 20px */
  --text-xl:    1.5rem;      /* 24px */
  --text-2xl:   2rem;        /* 32px – mobile H2 */
  --text-3xl:   2.5rem;      /* 40px */
  --text-4xl:   3rem;        /* 48px – desktop H2 */
  --text-5xl:   4rem;        /* 64px – desktop H1 */
  --text-6xl:   4.75rem;     /* 76px – hero H1 desktop */

  /* ── Spacing ───────────────────────────────────────────────── */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  --section-py:    7.5rem;     /* 120px desktop */
  --section-py-sm: 4.375rem;   /* 70px mobile */

  /* ── Border Radius ─────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 100px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl:   0 24px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-gold: 0 4px 24px rgba(201, 168, 76, 0.35);
  --shadow-navy: 0 8px 40px rgba(26, 26, 46, 0.50);

  /* ── Transition ────────────────────────────────────────────── */
  --transition: all 0.3s ease;

  /* ── Layout ────────────────────────────────────────────────── */
  --container:  1200px;
  --navbar-h:   80px;
  --gutter:     24px;
}

/* ── Mobile overrides ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-py: var(--section-py-sm);
    --text-5xl:   2.375rem;  /* 38px */
    --text-6xl:   2.75rem;   /* 44px */
  }
}