/* =====================================================================
   Vexels Design System — Colors & Typography Tokens
   Sourced from the Vexels Figma design system file (DSVEXELS.fig).
   ===================================================================== */

/* ------- Fonts -----------------------------------------------------
   Primary UI: Poppins (Google Fonts) — used at 1160+ instances.
   Secondary UI/labels: Inter Semi Bold — small labels at 12px.
   Section labels in Icons set: Manrope at 24px.
   Display in DesignSystemHeader: Poppins Bold 72px.
------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  /* ===================== COLORS ===================== */

  /* Brand / Functional palettes (each has -20 / 500 / 600 hover) */
  --vex-blue-500: #3F80F1;       /* Promotional buttons, feature & tool icons */
  --vex-blue-500-20: rgba(63, 128, 241, 0.20);
  --vex-blue-600: #115EE4;       /* Hover over Blue 500 */

  --vex-purple-500: #D946EF;     /* Quote Generator */
  --vex-purple-500-20: rgba(217, 70, 239, 0.20);
  --vex-purple-600: #C613E1;     /* Hover over Purple 500 */

  --vex-red-500: #FF5C5C;        /* T-Shirt Maker, Favorites, Invalid fields */
  --vex-red-500-20: rgba(255, 92, 92, 0.20);
  --vex-red-600: #EE4545;        /* Hover over Red 500 */

  --vex-green-500: #38B27A;      /* Pricing button, progress bars, valid fields */
  --vex-green-500-20: rgba(56, 178, 122, 0.20);
  --vex-green-600: #329F6C;      /* Hover over Green 500 */

  /* Base */
  --vex-white: #FFFFFF;
  --vex-white-40: rgba(255, 255, 255, 0.40);
  --vex-white-20: rgba(255, 255, 255, 0.20);

  --vex-gray-100: #F2F2F2;
  --vex-gray-200: #E0E0E0;
  --vex-gray-300: #CFCFCF;
  --vex-gray-400: #BDBDBD;
  --vex-gray-500: #A6A6A6;
  --vex-gray-600: #8C8C8C;
  --vex-gray-700: #696969;
  --vex-gray-800: #1D1D1D;       /* Primary text/icon — used 10 095× */
  --vex-gray-800-40: rgba(29, 29, 29, 0.40);
  --vex-gray-800-20: rgba(29, 29, 29, 0.20);
  --vex-gray-900: #1A1A1A;
  --vex-gray-950: #000000;

  /* Tertiary surface tints seen in Figma */
  --vex-surface-tint: #F7F7F7;   /* card hover / subtle field bg */
  --vex-stroke-faint: #FBFBFB;   /* hairline divider */

  /* Gradient (AI tools / promotional AI CTA) */
  --vex-gradient-ai: linear-gradient(90deg, #3F80F1 0%, #D946EF 100%);
  --vex-gradient-ai-20: linear-gradient(90deg, rgba(63,128,241,0.20) 0%, rgba(217,70,239,0.20) 100%);

  /* Semantic aliases (so consumers don't have to memorize the palette) */
  --fg-primary: var(--vex-gray-800);
  --fg-secondary: var(--vex-gray-700);
  --fg-muted: var(--vex-gray-600);
  --fg-subtle: var(--vex-gray-500);
  --fg-on-dark: var(--vex-white);

  --bg-canvas: var(--vex-white);
  --bg-surface: var(--vex-white);
  --bg-surface-alt: var(--vex-gray-100);
  --bg-surface-tint: var(--vex-surface-tint);
  --bg-dark: var(--vex-gray-800);

  --border-faint: var(--vex-gray-100);
  --border-default: var(--vex-gray-200);
  --border-strong: var(--vex-gray-300);

  --color-cta: var(--vex-gray-800);          /* Primary CTAs are near-black */
  --color-cta-hover: #000000;
  --color-promo: var(--vex-blue-500);        /* Blue = promotional / feature */
  --color-promo-hover: var(--vex-blue-600);
  --color-ai: var(--vex-gradient-ai);
  --color-success: var(--vex-green-500);
  --color-success-hover: var(--vex-green-600);
  --color-danger: var(--vex-red-500);
  --color-danger-hover: var(--vex-red-600);
  --color-accent: var(--vex-purple-500);
  --color-accent-hover: var(--vex-purple-600);

  /* Shadows (Tailwind drop-shadow scale, taken from Figma Drop Shadow page) */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow:    0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* ===================== TYPE ===================== */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-label: "Inter", "Poppins", system-ui, sans-serif;
  --font-section: "Manrope", "Poppins", system-ui, sans-serif;

  /* Tailwind-based type scale (Vexels uses Tailwind's scale in Figma) */
  --text-xs:  0.75rem;   /* 12px — meta / small chip labels (Inter Semi Bold) */
  --text-sm:  0.875rem;  /* 14px — primary button label, body small */
  --text-base:1rem;      /* 16px — body */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.25rem;   /* 20px — sub-headings */
  --text-2xl: 1.5rem;    /* 24px — card titles, section headers (Manrope) */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */
  --text-7xl: 4.5rem;    /* 72px — hero/display */
  --text-8xl: 6rem;      /* 96px — extra display */

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-loose: 1.75;

  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;        /* Vexels' default UI weight */
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* ===================== SPACING / RADII / BORDER (Tailwind) ===================== */
  --space-px: 1px;
  --space-0_5: 0.125rem;
  --space-1: 0.25rem;
  --space-1_5: 0.375rem;
  --space-2: 0.5rem;
  --space-2_5: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-none: 0;
  --radius-sm: 0.125rem;       /* rounded-sm */
  --radius:    0.25rem;        /* rounded   */
  --radius-md: 0.375rem;       /* rounded-md */
  --radius-lg: 0.5rem;         /* rounded-lg — buttons */
  --radius-xl: 0.75rem;        /* rounded-xl */
  --radius-2xl: 1rem;          /* rounded-2xl — cards */
  --radius-3xl: 1.5rem;        /* rounded-3xl */
  --radius-full: 9999px;

  --border-w-1: 1px;
  --border-w-2: 2px;
  --border-w-4: 4px;
  --border-w-8: 8px;

  --blur-none: 0;
  --blur-sm: 4px;
  --blur:    8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* Standard motion (Vexels uses subtle hover-color / no bounces) */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */
html { font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-canvas); }
body { font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--fg-primary); }

h1, .h1 {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-7xl); line-height: 1; letter-spacing: -0.02em; color: var(--fg-primary);
}
h2, .h2 {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-5xl); line-height: 1.05; letter-spacing: -0.015em; color: var(--fg-primary);
}
h3, .h3 {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-3xl); line-height: 1.15; color: var(--fg-primary);
}
h4, .h4 {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-2xl); line-height: 1.2; color: var(--fg-primary);
}
h5, .h5 {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--text-xl); line-height: 1.25; color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--text-base); line-height: 1.5; color: var(--fg-secondary);
}
.body-sm { font-size: var(--text-sm); line-height: 20px; }
.label   { font-family: var(--font-label); font-weight: var(--weight-semibold); font-size: var(--text-xs); line-height: 1; color: var(--fg-muted); }
.section-eyebrow { font-family: var(--font-section); font-size: var(--text-2xl); line-height: 1; color: var(--fg-primary); }
.display-xl { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-8xl); line-height: 1; letter-spacing: -0.03em; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }