/* =====================================================
   PRIMETIMEGREENS — Design System Variables
   Extracted from the original HTML template.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* ── Brand Colors ── */
  --color-primary:        #00241a;
  --color-forest-deep:    #081c15;
  --color-obsidian:       #0b0f0d;
  --color-dark-surface:   #0A120E;
  --color-dark-card:      #08100C;
  --color-dark-alt:       #09110D;
  --color-dark-footer:    #060D09;

  /* ── Greens ── */
  --color-leaf-vibrant:   #059669;
  --color-leaf-light:     #34D399;
  --color-secondary-fixed: #6ffbbe;
  --color-emerald:        #10B981;
  --color-emerald-bg:     #0E2A1E;
  --color-mint-card:      #9DF6C6;
  --color-mint-text:      #052E1B;

  /* ── Sand / Warm Neutrals ── */
  --color-sand-canvas:    #FBFBF9;
  --color-sand-light:     #F5F4EE;
  --color-sand-card:      #F5E296;
  --color-sand-gold:      #F8E79B;
  --color-bg-body:        #FAFAF8;
  --color-bg-neutral:     #F7F7F5;
  --color-bg-card-alt:    #EDEDEC;

  /* ── Text Colors ── */
  --color-text-primary:   #111827;
  --color-text-heading:   #0A120E;
  --color-text-body:      #121212;
  --color-text-slate:     #52525B;
  --color-text-muted:     rgba(0, 0, 0, 0.6);
  --color-text-subtle:    rgba(0, 0, 0, 0.4);
  --color-text-white:     #FFFFFF;
  --color-text-white-muted: rgba(255, 255, 255, 0.7);
  --color-text-white-subtle: rgba(255, 255, 255, 0.5);

  /* ── Colored Inline Tags (Hero) ── */
  --color-tag-pink-bg:    #FCE4EC;
  --color-tag-pink-text:  #880E4F;
  --color-tag-blue-bg:    #E1F5FE;
  --color-tag-blue-text:  #01579B;
  --color-tag-orange-bg:  #FFF3E0;
  --color-tag-orange-text:#E65100;

  /* ── Borders ── */
  --color-border-subtle:  #E4E4E7;
  --color-border-light:   rgba(0, 0, 0, 0.07);
  --color-border-dark:    rgba(255, 255, 255, 0.1);

  /* ── Typography ── */
  --font-sans:            'Inter', sans-serif;
  --font-display:         'Plus Jakarta Sans', sans-serif;
  --font-mono:            ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

  --letter-spacing-editorial: -0.035em;
  --letter-spacing-tight:     -0.025em;
  --letter-spacing-wide:      0.05em;
  --letter-spacing-wider:     0.08em;
  --letter-spacing-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-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* ── Border Radius ── */
  --radius-sm:     0.375rem;
  --radius-md:     0.5rem;
  --radius-lg:     0.75rem;
  --radius-xl:     1rem;
  --radius-2xl:    1.25rem;
  --radius-3xl:    1.5rem;
  --radius-pill:   9999px;
  --radius-card:   28px;
  --radius-card-lg: 32px;

  /* ── Shadows ── */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:     0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md:     0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-xl:     0 20px 50px rgba(0, 0, 0, 0.08);
  --shadow-2xl:    0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow-green: 0 0 40px rgba(111, 251, 190, 0.08);
  --shadow-glow-dot:   0 0 8px #10B981;
  --shadow-glow-mint:  0 0 8px #6ffbbe;
  --shadow-glow-neon:  0 0 10px #6ffbbe;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-image:  700ms ease;

  /* ── Layout ── */
  --max-width:         72rem;   /* 1152px = max-w-6xl */
  --nav-height:        56px;
}