/* ============================================================
   EMMALEAF CANNABIS LAB + KITCHEN — Design Tokens
   Inspired by: Ohio Green Systems editorial/industrial aesthetic
   Brand: #A0CC4E (light green) + #168543 (dark green) + #1A1A1A (charcoal)
   Typography: Bebas Neue (display) + Cabinet Grotesk (body)
   ============================================================ */

/* Bebas Neue loaded via <link rel="preload"> in HTML head */

:root, [data-theme='light'] {
  /* Brand */
  --el-green:       #A0CC4E;
  --el-green-dark:  #168543;
  --el-charcoal:    #1A1A1A;
  --el-black:       #0D0D0D;

  /* Surfaces */
  --color-bg:              #F5F5F3;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #EFEFED;
  --color-surface-dark:    #1A1A1A;
  --color-divider:         #E0E0DC;
  --color-border:          #D0D0CA;

  /* Text */
  --color-text:            #1A1A1A;
  --color-text-muted:      #555550;
  --color-text-faint:      #909088;
  --color-text-inverse:    #F5F5F3;

  /* Primary */
  --color-primary:         #168543;
  --color-primary-hover:   #0F6332;
  --color-primary-light:   #A0CC4E;
  --color-primary-highlight: #E8F5D8;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 48px rgba(0,0,0,0.14);
  --shadow-xl:  0 24px 80px rgba(0,0,0,0.18);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.12);

  /* Dark surface colors (for sections/cards that stay dark) */
  --surface-dark: #0E0E0C;
  --surface-card: #161614;
  --surface-overlay: rgba(13,13,13,0.92);
  --text-on-dark: #E8E8E4;
  --text-on-dark-muted: #888880;
  --text-on-dark-faint: #484845;
  --text-on-dark-inverse: #F5F5F3;
  --footer-bg: #0D0D0D;
  --footer-text: rgba(255,255,255,0.45);
  --footer-text-hover: var(--el-green);
  --footer-col-title: #fff;
  --footer-bottom-border: rgba(255,255,255,0.07);
  --footer-disclaimer: rgba(255,255,255,0.2);

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Transitions */
  --t-fast: 140ms cubic-bezier(0.16,1,0.3,1);
  --t-base: 220ms cubic-bezier(0.16,1,0.3,1);
  --t-slow: 400ms cubic-bezier(0.16,1,0.3,1);

  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.8rem,   1rem    + 4.5vw,  5.5rem);
  --text-hero: clamp(4rem,     1rem    + 8vw,     9rem);

  /* Spacing (4px base) */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;   --s20: 5rem;   --s24: 6rem;
  --s32: 8rem;   --s40: 10rem;

  /* Layout */
  --max-w: 1280px;
  --max-w-narrow: 680px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* Fonts */
   --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
   --font-body:    'Inter', 'Helvetica Neue', sans-serif;
}

[data-theme='dark'] {
  --color-bg:              #0E0E0C;
  --color-surface:         #161614;
  --color-surface-2:       #1E1E1C;
  --color-surface-dark:    #0A0A08;
  --color-divider:         #252523;
  --color-border:          #303030;
  --color-text:            #E8E8E4;
  --color-text-muted:      #888880;
  --color-text-faint:      #484845;
  --color-primary:         #A0CC4E;
  --color-primary-hover:   #B8D970;
  --color-primary-light:   #A0CC4E;
  --color-primary-highlight: #1C2810;
  --surface-dark: #0E0E0C;
  --surface-card: #161614;
  --surface-overlay: rgba(13,13,13,0.92);
  --text-on-dark: #E8E8E4;
  --text-on-dark-muted: #888880;
  --text-on-dark-faint: #484845;
  --text-on-dark-inverse: #F5F5F3;
  --trust-bg: #0E0E0C;
  --trust-color: rgba(255,255,255,0.5);
  --trust-sep-color: rgba(255,255,255,0.12);
}

[data-theme='light'] {
  --surface-dark: #F5F5F3;
  --surface-card: #FFFFFF;
  --surface-overlay: rgba(26,26,26,0.04);
  --text-on-dark: #1A1A1A;
  --text-on-dark-muted: #555550;
  --text-on-dark-faint: #909088;
  --text-on-dark-inverse: #1A1A1A;
  --color-text-inverse: #1A1A1A;
  --nav-bg: rgba(255,255,255,0.94);
  --nav-border: 1px solid rgba(0,0,0,0.08);
  --nav-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --nav-text: #1A1A1A;
  --nav-text-muted: rgba(26,26,26,0.5);
  --nav-text-link: rgba(26,26,26,0.6);
  --hamburger-color: rgba(26,26,26,0.7);
  --toggle-color: rgba(0,0,0,0.5);
  --toggle-border: 1px solid rgba(0,0,0,0.12);
  --toggle-hover: rgba(0,0,0,0.06);
  --toggle-hover-color: #1A1A1A;
  --trust-bg: #F5F5F3;
  --trust-color: rgba(26,26,26,0.5);
  --trust-sep-color: rgba(0,0,0,0.12);
  --door-overlay: rgba(26,26,26,0.04);
  --door-overlay-mid: rgba(26,26,26,0.02);
  --door-text: #1A1A1A;
  --door-text-muted: #555550;
  --door-card-num: rgba(160,204,78,0.25);
  --brand-card-bg: rgba(0,0,0,0.03);
  --brand-card-border: 1px solid rgba(0,0,0,0.08);
  --brand-card-hover: rgba(160,204,78,0.08);
  --brand-card-hover-border: rgba(160,204,78,0.25);
  --brand-card-text: #1A1A1A;
  --brand-card-text-muted: rgba(26,26,26,0.45);
  --stat-label-color: rgba(26,26,26,0.5);
  --display-heading-white: #1A1A1A;
  --wave-dark-fill: #1A1A1A;
  --powered-bg: #F5F5F3;
  --powered-text: #1A1A1A;
  --btn-dark-bg: #1A1A1A;
  --btn-dark-text: #FFFFFF;
  --btn-dark-border: #1A1A1A;
  --btn-dark-hover: #2D2D2D;
  --btn-dark-hover-border: #2D2D2D;
  --hero-door-num: rgba(22,133,67,0.4);
  --hero-door-label: var(--color-text-muted);
  --hero-door-name: var(--color-text);
  --hero-door-arrow: var(--color-text-faint);
  --btn-outline-white-bg: transparent;
  --btn-outline-white-text: var(--color-text);
  --btn-outline-white-border: var(--color-border);
  --btn-outline-white-hover-bg: var(--color-surface-2);
  --btn-outline-white-hover-border: var(--color-text);
  --btn-outline-green-text: var(--el-green-dark);
  --btn-outline-green-border: var(--el-green-dark);
  --btn-outline-green-hover-bg: var(--el-green-dark);
  --btn-outline-green-hover-text: #fff;
  --float-card-dark-bg: rgba(26,26,26,0.04);
  --float-card-dark-text: #1A1A1A;
  --float-card-dark-heading: #1A1A1A;
  --footer-bg: var(--color-bg);
  --footer-text: var(--color-text);
  --footer-text-hover: var(--el-green);
  --footer-col-title: var(--color-text);
  --footer-bottom-border: var(--color-border);
  --footer-disclaimer: var(--color-text-faint);
  --footer-text-inverse: var(--color-text);
  --back-to-top-bg: var(--el-green);
  --back-to-top-text: #1A1A1A;
  --back-to-top-shadow: 0 4px 16px rgba(160,204,78,0.35);
  --back-to-top-hover-shadow: 0 8px 24px rgba(160,204,78,0.45);
  --age-gate-bg: rgba(8,10,6,0.97);
  --age-gate-box-bg: rgba(255,255,255,0.03);
  --age-gate-box-border: rgba(255,255,255,0.08);
  --age-gate-logo: #fff;
  --age-gate-sub: rgba(255,255,255,0.3);
  --age-gate-q: rgba(255,255,255,0.85);
  --age-gate-note: rgba(255,255,255,0.3);
  --age-gate-hero-border: rgba(160,204,78,0.15);
 --mfg-text: #1A1A1A;
  --mfg-text-muted: #555550;
  --mfg-divider: rgba(0,0,0,0.1);
  --mfg-callout-bg: rgba(22,133,67,0.08);
  --mfg-callout-border: rgba(22,133,67,0.2);
  --mfg-card-bg: rgba(0,0,0,0.03);
  --mfg-card-border: 1px solid rgba(0,0,0,0.08);
  --mfg-card-hover: rgba(160,204,78,0.07);
  --mfg-card-hover-border: rgba(160,204,78,0.2);
  --mfg-hero-bg: #F5F5F3;
  --mfg-services-bg: #F5F5F3;
  --mfg-process-bg: #F5F5F3;
  --mfg-intake-bg: #F5F5F3;
  --mfg-wave-bg: #F5F5F3;
  --mfg-wave-fill: #1A1A1A;
  --mfg-form-bg: #FFFFFF;
  --mfg-form-border: var(--color-border);
  --mfg-dark-bg: #0E0E0C;
  --mfg-dark-text: #E8E8E4;
  --mfg-dark-text-muted: #888880;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0E0E0C; --color-surface: #161614;
    --color-surface-2: #1E1E1C; --color-divider: #252523;
    --color-border: #303030; --color-text: #E8E8E4;
    --color-text-muted: #888880; --color-primary: #A0CC4E;
    --color-primary-hover: #B8D970; --color-primary-light: #A0CC4E;
    --color-primary-highlight: #1C2810;
  }
}