/**
 * Katacart Design Tokens
 * Source: Figma Design Assets
 * Synced from: /dev/frontend/styles/design-colors.css
 */

:root {
  /* ========== Brand Colors ========== */

  /* Forest Green */
  --color-forest-green-100: #002823;
  --color-forest-green-90: #19463c;
  --color-forest-green-80: #325a50;
  --color-forest-green-70: #4b6e64;

  /* Coral */
  --color-coral-100: #d42e25;
  --color-coral-80: #fa5046;
  --color-coral-60: #e15850;
  --color-coral-40: #e8827c;

  /* Aqua */
  --color-aqua-100: #82dcb4;
  --color-aqua-75: #a0e6c8;
  --color-aqua-50: #c3ebdc;
  --color-aqua-25: #e1f5eb;

  /* Mustard */
  --color-mustard-100: #d7a000;
  --color-mustard-80: #e1b432;
  --color-mustard-60: #e6c864;
  --color-mustard-40: #f0d79b;

  /* Shell Pink */
  --color-shell-pink-100: #f096b4;
  --color-shell-pink-80: #f5aac3;
  --color-shell-pink-60: #f5bed2;
  --color-shell-pink-40: #fad7e1;

  /* Lavender */
  --color-lavender-100: #968ce6;
  --color-lavender-80: #aaa5eb;
  --color-lavender-60: #beb9f0;
  --color-lavender-40: #d7d2f5;

  /* Neutrals */
  --color-white-100: #ffffff;
  --color-off-white-100: #cfc9bc;
  --color-off-white-50: #faf5eb;
  --color-light: #ebf1f5;

  /* ========== Semantic Colors ========== */

  /* Background */
  --background-accent: #fa5046;
  --background-primary: #002823;
  --background-secondary: #4b6e64;
  --background-tertiary: #82dcb4;
  --background-white: #ffffff;
  --background-surface: #faf5eb;

  /* Content (Text) */
  --content-on-accent: #ffffff;
  --content-on-primary: #ffffff;
  --content-on-surface: #002823;
  --content-on-tertiary: #002823;
  --content-on-white: #002823;
  --content-on-white-secondary: #4b6e64;
  --content-on-white-accent: #fa5046;

  /* Stroke (Borders) */
  --stroke-dark: #002823;
  --stroke-default: #eee6d5;

  /* Button Colors */
  --button-secondary-default: #002823;

  /* ========== Interactive States ========== */

  /* Hover States */
  --state-hover-on-light: #0028231a;
  --state-hover-on-dark: #faf5eb1a;
  --state-hover-on-accent: #0028231f;

  /* Press States */
  --state-press-on-light: #00282329;
  --state-press-on-dark: #faf5eb29;
  --state-press-forest-green: #00282300;

  /* Focus States */
  --state-focus-on-light: #00282329;
  --state-focus-on-dark: #faf5eb29;
  --state-off-white-focus: #faf5eb1f;

  /* Disabled States */
  --state-disabled-white: #ffffff80;
  --state-disabled-coral: #fa504680;
  --state-disabled-forest-green: #00282380;
  --state-disabled-off-white: #faf5eb80;
  --state-disabled-stroke: #eee6d5;

  /* Form Field States */
  --state-hover-stroke: #cfc9bc;
  --state-focus-stroke: #4b6e64;

  /* Validation States */
  --error-90: #ba0b0b;
  --error-5: #ffe8e8;
  --success-90: #00b464;
  --success-5: #e7f8f0;
  --warning-90: #d7a000;
  --warning-5: #fbf2d6;

  /* ========== Spacing ========== */

  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-72: 72px;
  --spacing-120: 120px;

  /* ========== Typography Sizes ========== */

  --size-12: 12px;
  --size-14: 14px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-28: 28px;
  --size-40: 40px;
  --size-72: 72px;

  /* ========== Component Sizes ========== */

  /* Button Sizes */
  --button-height-extra-small: 24px;
  --button-height-small: 32px;
  --button-height-medium: 40px;
  --button-height-large: 48px;

  /* Form Field Sizes */
  --field-height-medium: 40px;
  --field-height-large: 48px;

  /* Container Sizes */
  --container-max-width: 1440px;
  --container-padding: 24px;

  /* Content Container (narrower for main content) */
  --content-max-width: 1400px;
  --content-padding: 40px;

  /* Header Sizes */
  --header-height: 64px;
  --header-mobile-height: 96px;

  /* Footer Sizes */
  --footer-padding-vertical: 48px;

  /* ========== Border Radius ========== */

  --corner-radius-4: 4px;
  --corner-radius-8: 8px;
  --corner-radius-12: 12px;
  --corner-radius-40: 40px;
  --corner-radius-full: 9999px;

  /* ========== Shadows ========== */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* ========== Typography ========== */

  /* Font Family */
  --font-family-primary: "Denim INK-TRIAL", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Font Sizes with Line Heights */
  --font-size-12: 12px;
  --font-line-height-12: 12px;
  --font-weight-medium-12: 500;

  --font-size-14: 14px;
  --font-line-height-14: 16px;
  --font-weight-regular-14: 400;
  --font-weight-medium-14: 500;
  --font-weight-semibold-14: 600;

  --font-size-16: 16px;
  --font-line-height-16: 20px;
  --font-weight-regular-16: 400;
  --font-weight-medium-16: 500;
  --font-weight-semibold-16: 600;

  --font-size-18: 18px;
  --font-line-height-18: 20px;
  --font-weight-regular-18: 400;
  --font-weight-medium-18: 500;
  --font-weight-semibold-18: 600;

  --font-size-20: 20px;
  --font-line-height-20: 24px;
  --font-weight-semibold-20: 600;

  --font-size-28: 28px;
  --font-line-height-28: 32px;
  --font-weight-semibold-28: 600;

  --font-size-40: 40px;
  --font-line-height-40: 44px;
  --font-weight-semibold-40: 600;

  --font-size-72: 72px;
  --font-line-height-72: 80px;
  --font-weight-semibold-72: 600;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========== Z-Index ========== */

  --z-index-base: 1;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ========== Breakpoints (for reference in JS) ========== */

  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1392px;

  /* ========== Transitions ========== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}