/* ============================================================
   SMPL Demo Site — CSS Custom Properties
   All client-facing visual variables live here.
   Customize.py writes this file from intake-template.json.

   DEMO VALUES: Sunrise Home Services
   Replace with {{PLACEHOLDER}} tokens before generating a new client.
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --color-primary:        #1e3a5f;
  --color-primary-dark:   #152d4a;
  --color-accent:         #f59e0b;
  --color-text:           #111827;
  --color-text-light:     #6b7280;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f9fafb;
  --color-border:         #e5e7eb;

  /* ── Typography ── */
  --font-heading:         'Inter', sans-serif;
  --font-body:            'Inter', sans-serif;
  --font-size-base:       16px;
  --font-size-sm:         0.875rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        1.875rem;
  --font-size-4xl:        2.25rem;
  --font-size-5xl:        3rem;
  --line-height-base:     1.6;
  --line-height-tight:    1.25;

  /* ── Spacing ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Layout ── */
  --container-max:        1200px;
  --container-padding:    var(--space-6);
  --section-padding-y:    var(--space-20);

  /* ── Nav ── */
  --nav-height:           72px;
  --nav-bg-transparent:   transparent;
  --nav-bg-solid:         var(--color-bg);
  --nav-shadow-solid:     0 1px 3px rgba(0, 0, 0, 0.1);

  /* ── Borders ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.1);

  /* ── Transitions ── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* ── Hero ── */
  --hero-min-height:    100vh;
  --hero-overlay:       rgba(0, 0, 0, 0.52);

}