/* ==========================================================================
   ELLWEN PAINTS — Design Tokens (CSS Custom Properties)
   ========================================================================== */

:root {
  /* ── Color Palette ─────────────────────────────────────────────────────── */

  /* Primary — Deep Navy */
  --color-primary:             #1B1464;
  --color-primary-dark:        #100B3F;
  --color-primary-light:       #2A208B;
  --color-primary-rgb:         27, 20, 100;

  /* Neutrals */
  --color-white:               #FFFFFF;
  --color-off-white:           #F5F6FA;
  --color-light-grey:          #E9ECEF;
  --color-medium-grey:         #6C757D;
  --color-dark-grey:           #495057;
  --color-dark-charcoal:       #242424;
  --color-black:               #242424;

  /* Brand Accent — Gold */
  --color-brand-accent:        #C48E2B;
  --color-brand-accent-light:  #E8A933;
  --color-brand-accent-dark:   #A1731E;
  --color-brand-accent-rgb:    196, 142, 43;

  /* Semantic */
  --color-success:             #28A745;
  --color-error:               #DC3545;
  --color-warning:             #FFC107;
  --color-info:                #17A2B8;

  /* Paint Swatches (used as decorative accents) */
  --paint-terracotta:          #C46C4D;
  --paint-sage:                #7A9E7E;
  --paint-sky:                 #87CEEB;
  --paint-ivory:               #FFFFF0;
  --paint-charcoal:            #36454F;
  --paint-blush:               #DE6FA1;
  --paint-ocean:               #006994;
  --paint-sand:                #C2B280;
  --paint-lavender:            #B4A7D6;
  --paint-mint:                #98D4BB;
  --paint-coral:               #FF7F7F;
  --paint-slate:               #708090;

  /* ── Typography ────────────────────────────────────────────────────────── */

  --font-display:              'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-primary:              'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes — modular scale (1.25 ratio) */
  --text-xs:                   0.75rem;     /* 12px */
  --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:                  1.75rem;     /* 28px */
  --text-3xl:                  2rem;        /* 32px */
  --text-4xl:                  2.25rem;     /* 36px */
  --text-5xl:                  3rem;        /* 48px */
  --text-6xl:                  3.5rem;      /* 56px */
  --text-7xl:                  4.5rem;      /* 72px */

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

  /* Line Heights */
  --leading-tight:             1.2;
  --leading-snug:              1.35;
  --leading-normal:            1.6;
  --leading-relaxed:           1.75;

  /* Letter Spacing */
  --tracking-tight:            -0.02em;
  --tracking-normal:           0;
  --tracking-wide:             0.02em;
  --tracking-wider:            0.05em;
  --tracking-widest:           0.1em;

  /* ── Spacing Scale ─────────────────────────────────────────────────────── */

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

  /* Section Spacing */
  --section-padding:           var(--space-24);
  --section-padding-sm:        var(--space-16);

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

  --container-max:             1400px;
  --container-narrow:          900px;
  --container-wide:            1600px;
  --container-padding:         var(--space-6);

  /* ── Borders & Radii ───────────────────────────────────────────────────── */

  --radius-sm:                 4px;
  --radius-md:                 8px;
  --radius-lg:                 12px;
  --radius-xl:                 16px;
  --radius-2xl:                24px;
  --radius-full:               9999px;

  --border-light:              1px solid var(--color-light-grey);
  --border-medium:             1px solid rgba(0, 0, 0, 0.1);
  --border-accent:             2px solid var(--color-brand-accent);

  /* ── Shadows ───────────────────────────────────────────────────────────── */

  --shadow-xs:                 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:                 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:                 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:                 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl:                 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-2xl:                0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-card:               0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:         0 8px 24px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-header:             0 1px 3px rgba(0, 0, 0, 0.08);

  /* ── Transitions ───────────────────────────────────────────────────────── */

  --transition-fast:           150ms ease;
  --transition-base:           250ms ease;
  --transition-slow:           400ms ease;
  --transition-slower:         600ms ease;
  --transition-spring:         500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ─────────────────────────────────────────────────────── */

  --z-base:                    1;
  --z-dropdown:                100;
  --z-sticky:                  200;
  --z-fixed:                   300;
  --z-header:                  400;
  --z-overlay:                 500;
  --z-modal:                   600;
  --z-toast:                   700;
  --z-floating:                800;

  /* ── Breakpoints (for reference — used in media queries) ───────────────── */
  /* Mobile:    < 576px   */
  /* Tablet:    576–768px */
  /* Laptop:    769–1024px */
  /* Desktop:   1025–1400px */
  /* Wide:      > 1400px  */
}

@media (max-width: 768px) {
  :root {
    /* Scale down large typography */
    --text-3xl:                  1.75rem;     /* 28px */
    --text-4xl:                  2rem;        /* 32px */
    --text-5xl:                  2.25rem;     /* 36px */
    --text-6xl:                  2.5rem;      /* 40px */
    --text-7xl:                  3rem;        /* 48px */

    /* Scale down section spacing */
    --section-padding:           var(--space-16);
    --section-padding-sm:        var(--space-10);
    
    /* Tighter container padding */
    --container-padding:         var(--space-4);
  }
}