/* ===== CSS CUSTOM PROPERTIES ===== */
/* GreenSun Design System Variables */

:root {
  /* Typography Sizes - Desktop */
  --display-large: 57px;
  --display-medium: 45px;
  --display-small: 36px;
  --headline-large: 32px;
  --headline-medium: 28px;
  --headline-small: 24px;
  --title-large: 22px;
  --title-medium: 16px;
  --title-small: 14px;
  --label-large: 14px;
  --label-medium: 12px;
  --label-small: 11px;
  --body-large: 16px;
  --body-medium: 14px;
  --body-small: 12px;

  /* Typography Sizes - Tablet */
  --display-large-t: 45px;
  --display-medium-t: 36px;
  --display-small-t: 32px;
  --headline-large-t: 28px;
  --headline-medium-t: 24px;
  --headline-small-t: 22px;
  --title-large-t: 20px;
  --title-medium-t: 16px;
  --title-small-t: 14px;
  --label-large-t: 14px;
  --label-medium-t: 12px;
  --label-small-t: 11px;
  --body-large-t: 16px;
  --body-medium-t: 14px;
  --body-small-t: 12px;

  /* Typography Sizes - Mobile */
  --display-large-m: 36px;
  --display-medium-m: 32px;
  --display-small-m: 28px;
  --headline-large-m: 24px;
  --headline-medium-m: 22px;
  --headline-small-m: 20px;
  --title-large-m: 18px;
  --title-medium-m: 16px;
  --title-small-m: 14px;
  --label-large-m: 12px;
  --label-medium-m: 10px;
  --label-small-m: 9px;
  --body-large-m: 14px;
  --body-medium-m: 12px;
  --body-small-m: 11px;

  /* Line Heights */
  --line-height-display-large: 1.1;
  --line-height-display-medium: 1.15;
  --line-height-display-small: 1.2;
  --line-height-headline-large: 1.25;
  --line-height-headline-medium: 1.3;
  --line-height-headline-small: 1.3;
  --line-height-title-large: 1.4;
  --line-height-title-medium: 1.4;
  --line-height-title-small: 1.4;
  --line-height-label-large: 1;
  --line-height-label-medium: 1;
  --line-height-label-small: 1;
  --line-height-body-large: 1.5;
  --line-height-body-medium: 1.5;
  --line-height-body-small: 1.5;

  /* Spacing Scale */
  --space-4xs: 2px;
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 80px;
  --space-6xl: 96px;

  /* Primary Colors */
  --primary-base: #1fc55c;
  --primary-dark: #16a049;
  --primary-very-dark: #0f5d2a;
  --primary-light: #e8f8ed;
  --primary-very-light: #f3fcf6;

  /* GreenSun Gradient */
  --gs-grad: linear-gradient(45deg, #1fc55c 50%, #2de3b9 100%);

  /* Secondary Colors */
  --secondary-base: #2ed967;
  --secondary-dark: #25b554;
  --secondary-very-dark: #17682e;
  --secondary-light: #eafaed;
  --secondary-very-light: #f4fcf6;

  /* Tertiary Colors */
  --tertiary-base: #161619;
  --tertiary-dark: #121214;
  --tertiary-very-dark: #070707;
  --tertiary-light: #d0d0d1;
  --tertiary-very-light: #e8e8e8;

  /* Neutral Colors */
  --neutral-base: #7c7c80;
  --neutral-dark: #3e3e40;
  --neutral-very-dark: #19191a;
  --neutral-black: #000000;
  --neutral-light: #cbcbcc;
  --neutral-very-light: #f2f2f2;
  --neutral-extra-light: #f2f2f2;
  --neutral-white: #ffffff;

  /* State Colors */
  --success: #67bd50;
  --error: #f2342b;
  --warning: #ffa92a;

  /* Additional Colors */
  --light-yellow: #e0d970;
  --pink: #e070c8;
  --teal: #08d4ef;

  /* Gradients */
  --gradient-vertical-1-to-2: linear-gradient(180deg, #1fc55c 0%, #2ed967 100%);
  --gradient-vertical-1-to-3: linear-gradient(180deg, #1fc55c 0%, #16a049 100%);
  --gradient-vertical-2-to-3: linear-gradient(180deg, #2ed967 0%, #16a049 100%);
  --gradient-horizontal-1-to-2: linear-gradient(120.96deg, #1fc55c 0%, #2ed967 100%);
  --gradient-horizontal-1-to-3: linear-gradient(120.96deg, #1fc55c 0%, #16a049 100%);
  --gradient-horizontal-2-to-3: linear-gradient(120.96deg, #2ed967 0%, #16a049 100%);
  --gradient-diagonal-1-to-2: linear-gradient(101.31deg, #1fc55c 0%, #2ed967 100%);
  --gradient-diagonal-1-to-3: linear-gradient(101.31deg, #1fc55c 0%, #16a049 100%);
  --gradient-diagonal-2-to-3: linear-gradient(101.31deg, #2ed967 0%, #16a049 100%);
  --gradient-horizontal-fade-white: linear-gradient(120.96deg, #ffffff 0%, #1fc55c 100%);
  --gradient-horizontal-fade-black: linear-gradient(120.96deg, #000000 0%, #16a049 100%);

  /* Fonts */
  --font-display: "Poppins", sans-serif;
  --font-rest: "Inter", sans-serif;

  /* Semantic Colors - Light Mode */
  --bg-primary: var(--neutral-white);
  --bg-secondary: var(--neutral-extra-light);
  --bg-tertiary: var(--neutral-very-light);
  --text-primary: var(--neutral-black);
  --text-secondary: var(--neutral-very-dark);
  --text-tertiary: var(--neutral-dark);
  --text-muted: var(--neutral-base);
  --border-light: var(--neutral-very-light);
  --border-medium: var(--neutral-light);
  --surface-primary: var(--neutral-white);
  --surface-secondary: var(--neutral-extra-light);
  --surface-hover: rgba(0, 0, 0, 0.05);
}

/* Dark Mode Variables */
[data-theme="dark"] {
  /* Primary Colors - brand consistency */
  --primary-base: #1fc55c;
  --primary-dark: #16a049;
  --primary-very-dark: #0f5d2a;
  --primary-light: #0f2f17;
  --primary-very-light: #0a1f0e;

  /* Semantic Colors - Dark Mode */
  --bg-primary: #0f0f10;
  --bg-secondary: #000000;
  --bg-tertiary: #242426;
  --text-primary: #ffffff;
  --text-secondary: #e5e5e6;
  --text-tertiary: #cbcbcc;
  --text-muted: #7c7c80;
  --border-light: #2a2a2c;
  --border-medium: #3e3e40;
  --surface-primary: #1a1a1b;
  --surface-secondary: #242426;
  --surface-hover: rgba(255, 255, 255, 0.1);

  /* Gradient overrides */
  --gradient-horizontal-fade-white: linear-gradient(120.96deg, #0f0f10 0%, #1fc55c 100%);
  --gradient-horizontal-fade-black: linear-gradient(120.96deg, #1a1a1b 0%, #16a049 100%);
  --neutral-very-light: #1a1a1b;
}

/* Responsive Typography - Tablet */
@media (max-width: 991px) {
  :root {
    --display-large: var(--display-large-t);
    --display-medium: var(--display-medium-t);
    --display-small: var(--display-small-t);
    --headline-large: var(--headline-large-t);
    --headline-medium: var(--headline-medium-t);
    --headline-small: var(--headline-small-t);
    --title-large: var(--title-large-t);
    --title-medium: var(--title-medium-t);
    --title-small: var(--title-small-t);
    --label-large: var(--label-large-t);
    --label-medium: var(--label-medium-t);
    --label-small: var(--label-small-t);
    --body-large: var(--body-large-t);
    --body-medium: var(--body-medium-t);
    --body-small: var(--body-small-t);
  }
}

/* Responsive Typography - Mobile */
@media (max-width: 599px) {
  :root {
    --display-large: var(--display-large-m);
    --display-medium: var(--display-medium-m);
    --display-small: var(--display-small-m);
    --headline-large: var(--headline-large-m);
    --headline-medium: var(--headline-medium-m);
    --headline-small: var(--headline-small-m);
    --title-large: var(--title-large-m);
    --title-medium: var(--title-medium-m);
    --title-small: var(--title-small-m);
    --label-large: var(--label-large-m);
    --label-medium: var(--label-medium-m);
    --label-small: var(--label-small-m);
    --body-large: var(--body-large-m);
    --body-medium: var(--body-medium-m);
    --body-small: var(--body-small-m);
  }
}