/**
 * Enerbion Design Tokens
 * Extracted directly from Figma Style Guide
 * Node ID Colors: 393:31673 | Node ID Typography: 393:32492
 */

:root {
  /* ==========================================================================
     COLOR TOKENS
     ========================================================================== */

  /* --- Green Palette --- */
  --color-green-50: #f2f9e8;
  --color-green-100: #dfefc5;
  --color-green-200: #c9e4a0;
  --color-green-300: #b3da78;
  --color-green-400: #a1d158;
  --color-green-500: #90c938;
  --color-green-600-base: #80b930; /* Primary Enerbion Green */
  --color-green-700: #6ba526;
  --color-green-800: #56911c;
  --color-green-900: #2f6f05;

  /* --- Yellow Palette --- */
  --color-yellow-50: #fbfce4;
  --color-yellow-100: #f6f5bd;
  --color-yellow-200: #f0ee91;
  --color-yellow-300: #eae863;
  --color-yellow-400: #e6e43e;
  --color-yellow-500-base: #e3df00;
  --color-yellow-600: #e3cd00;
  --color-yellow-700: #e4b500;
  --color-yellow-800: #e49d00;
  --color-yellow-900: #e37300;

  /* --- Blue Palette --- */
  --color-blue-50: #e8eaf6;
  --color-blue-100: #c4cbe9;
  --color-blue-200: #9daadb;
  --color-blue-300: #7689cc;
  --color-blue-400: #576ec1;
  --color-blue-500: #3655b7;
  --color-blue-600: #304dad;
  --color-blue-700: #2643a1;
  --color-blue-800-base: #1d3995; /* Primary Enerbion Blue */
  --color-blue-900: #0b2780;

  /* --- Sky Palette --- */
  --color-sky-50: #e2f5fb;
  --color-sky-100: #b5e4f5;
  --color-sky-200: #87d3ef;
  --color-sky-300: #5ec1e8;
  --color-sky-400: #45b4e4;
  --color-sky-500-base: #35a7e0;
  --color-sky-600: #2f99d2;
  --color-sky-700: #2887be;
  --color-sky-800: #2576aa;
  --color-sky-900: #1c5688;

  /* --- Neutral Palette --- */
  --color-neutral-50: #f5f5f5;
  --color-neutral-100: #e9e9e9;
  --color-neutral-200: #d9d9d9;
  --color-neutral-300: #c4c4c4;
  --color-neutral-400: #9d9d9d;
  --color-neutral-500: #7b7b7b;
  --color-neutral-600: #555555;
  --color-neutral-700: #434343;
  --color-neutral-800: #262626;
  --color-neutral-900-base: #000000;

  /* --- Overlay Palette --- */
  --color-overlay-neutral-900-50: rgba(0, 0, 0, 0.5);
  --color-overlay-neutral-900-4: rgba(0, 0, 0, 0.04);

  /* --- White --- */
  --color-white: #ffffff;

  /* --- Red / Error Palette --- */
  --color-red-50: #ffebee;
  --color-red-100: #ffcdd2;
  --color-red-200: #ef9a9a;
  --color-red-300: #e57373;
  --color-red-400: #ef5350;
  --color-red-500: #f34235;
  --color-red-600: #e53935;
  --color-red-600-base: #e53935; /* Semantic Error / Destructive */
  --color-red-700: #d32f2f;
  --color-red-800: #c62828;
  --color-red-900: #b71c1c;

  /* --- Gradients --- */
  --color-green-yellow-gradient: linear-gradient(90deg, #80b930 0%, #e3df00 100%);
  --color-blue-sky-gradient: linear-gradient(90deg, #1d3995 0%, #35a7e0 100%);

  /* --- Semantic Aliases --- */
  --color-primary: var(--color-green-600-base);
  --color-primary-hover: var(--color-green-700);
  --color-secondary: var(--color-blue-800-base);
  --color-secondary-hover: var(--color-blue-900);
  --color-text-main: var(--color-neutral-800);
  --color-text-muted: var(--color-neutral-500);
  --color-text-light: var(--color-white);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-400);
  --color-bg-page: var(--color-white);
  --color-bg-muted: var(--color-neutral-50);

  /* ==========================================================================
     TYPOGRAPHY TOKENS
     ========================================================================== */

  /* --- Font Families --- */
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-sub: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-base: var(--font-family-primary);

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

  /* --- Desktop Type Tokens --- */
  --font-desktop-h1-bold: 700 36px/56px var(--font-family-primary);
  --font-desktop-h2-bold: 700 24px/36px var(--font-family-primary);
  --font-desktop-h2-semi-bold: 600 24px/36px var(--font-family-primary);
  --font-desktop-h3-semi-bold: 600 20px/28px var(--font-family-primary);
  --font-desktop-sh1-semi-bold: 600 16px/24px var(--font-family-sub);
  --font-desktop-b1-bold: 700 16px/24px var(--font-family-primary);
  --font-desktop-b1-semi-bold: 600 16px/24px var(--font-family-primary);
  --font-desktop-b1-regular: 400 16px/24px var(--font-family-primary);
  --font-desktop-b2-semi-bold: 600 14px/20px var(--font-family-primary);
  --font-desktop-b2-regular: 400 14px/20px var(--font-family-primary);
  --font-desktop-link1-regular: 400 16px/24px var(--font-family-primary);
  --font-desktop-link2-regular: 400 14px/20px var(--font-family-primary);

  /* --- Mobile Type Tokens --- */
  --font-mobile-h1-bold: 700 28px/40px var(--font-family-primary);
  --font-mobile-h2-bold: 700 20px/28px var(--font-family-primary);
  --font-mobile-h2-semi-bold: 600 20px/28px var(--font-family-primary);
  --font-mobile-h3-semi-bold: 600 18px/28px var(--font-family-primary);
  --font-mobile-sh1-semi-bold: 600 14px/20px var(--font-family-sub);
  --font-mobile-b1-semi-bold: 600 16px/24px var(--font-family-primary);
  --font-mobile-b1-regular: 400 16px/24px var(--font-family-primary);
  --font-mobile-b2-semi-bold: 600 14px/20px var(--font-family-primary);
  --font-mobile-b2-regular: 400 14px/20px var(--font-family-primary);
  --font-mobile-b3-regular: 400 12px/16px var(--font-family-primary);
  --font-mobile-link2-regular: 400 14px/20px var(--font-family-primary);

  /* --- Letter Spacing Tokens --- */
  --letter-spacing-desktop-sh1: 0.16em; /* 16% */
  --letter-spacing-mobile-sh1: 0.12em;  /* 12% */

  /* ==========================================================================
     SPACING, RADIUS & SHADOW TOKENS
     ========================================================================== */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

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

  /* ==========================================================================
     ELEVATION / EFFECT TOKENS
     ========================================================================== */
  --elevation-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);

  /* ==========================================================================
     LAYOUT GUIDE & GRID TOKENS
     ========================================================================== */
  /* Desktop 1440px */
  --layout-desktop-columns: 12;
  --layout-desktop-margin: 120px;
  --layout-desktop-gutter: 36px;
  --layout-desktop-width: 1440px;

  /* Mobile 390px */
  --layout-mobile-columns: 4;
  --layout-mobile-margin: 16px;
  --layout-mobile-gutter: 16px;
  --layout-mobile-width: 390px;

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}