/**
 * Design Tokens
 *
 * This file contains all design tokens extracted from Figma design:
 * https://www.figma.com/design/ajIPzrAoXL2Ouu3dhBITFb/Pr%C3%A6st%C3%B8-sport-udkast-FINAL
 *
 * Values extracted from provided Figma images.
 */

:root {
  /* Color Palette - Extracted from Figma images */
  --color-primary: #E53E3E;     /* Primary red color used in headers, buttons */
  --color-primary-rgb: 229, 62, 62; /* RGB values for primary color */
  --color-primary-dark: #C53030; /* Darker red for hover states */
  --color-secondary: #063142;  /* Darker blue used for navigation, footers */
  --color-accent: #1774A1;    /* Blue accent color for secondary elements */
  --color-accent-rgb: 23, 116, 161; /* RGB values for accent color */
  --color-accent-dark: #135F85; /* Darker blue for hover states */
  --color-background: #FFFFFF;  /* White background */
  --color-text: #333333;        /* Dark gray for main text */
  --color-text-light: #666666;  /* Lighter gray for secondary text */
  --color-text-on-dark: #FFFFFF; /* White text on dark backgrounds */
  --color-border: #E0E0E0;      /* Light gray for borders */
  --color-light-bg: #F6F6F6;    /* Light gray background for alternating sections */
  --color-footer-bg: #063142;   /* Dark blue footer background */
  
  /* Typography - Extracted from Figma images */
  --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  
  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
  
  /* Spacing */
  --spacing-unit: 8px;
  --spacing-xs: var(--spacing-unit);          /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 2); /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 3); /* 24px */
  --spacing-lg: calc(var(--spacing-unit) * 4); /* 32px */
  --spacing-xl: calc(var(--spacing-unit) * 6); /* 48px */
  --spacing-2xl: calc(var(--spacing-unit) * 8); /* 64px */
  --spacing-3xl: calc(var(--spacing-unit) * 12); /* 96px */
  
  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;
  
  /* Box Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  /* Container Width */
  --container-width-sm: 640px;
  --container-width-md: 768px;
  --container-width-lg: 1024px;
  --container-width-xl: 1280px;
  --container-width-max: 1440px;
  
  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  
  /* Z-index */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-tooltip: 1060;
  
  /* Component-specific */
  --header-height: 80px;
  --mobile-header-height: 70px;
  --footer-padding: 60px;
  --card-padding: 24px;
  --card-image-height: 220px;
  --button-padding: 12px 24px;
  --nav-item-spacing: 20px;
}

/* Responsive Breakpoints - Based on Figma designs */
@media (min-width: 768px) {
  :root {
    /* Tablet-specific token adjustments */
    --font-size-base: 17px;
    --header-height: 90px;
    --card-image-height: 240px;
  }
}

@media (min-width: 1024px) {
  :root {
    /* Desktop-specific token adjustments */
    --font-size-base: 18px;
    --header-height: 100px;
    --card-image-height: 260px;
  }
}

/* Component Design Tokens */

/* Buttons */
:root {
  /* Primary Button */
  --button-primary-bg: var(--color-primary);
  --button-primary-text: var(--color-text-on-dark);
  --button-primary-border: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-dark);
  --button-primary-text-hover: var(--color-text-on-dark);
  --button-primary-border-hover: var(--color-primary-dark);
  
  /* Secondary Button */
  --button-secondary-bg: var(--color-accent);
  --button-secondary-text: var(--color-text-on-dark);
  --button-secondary-border: var(--color-accent);
  --button-secondary-bg-hover: var(--color-accent-dark); /* Lighter blue on hover */
  --button-secondary-text-hover: var(--color-text-on-dark);
  --button-secondary-border-hover: var(--color-accent-dark);
  
  /* Text Button */
  --button-text-color: var(--color-primary);
  --button-text-hover: var(--color-accent);
}

/* Cards */
:root {
  --card-bg: var(--color-background);
  --card-text: var(--color-text);
  --card-border: var(--color-border);
  --card-shadow: var(--shadow-card);
  --card-radius: var(--border-radius-md);
  --card-title-size: var(--font-size-xl);
}

/* Forms */
:root {
  --form-input-border: #CCCCCC;
  --form-input-bg: var(--color-background);
  --form-input-text: var(--color-text);
  --form-input-radius: var(--border-radius-sm);
  --form-input-padding: 12px 16px;
  --form-input-border-focus: var(--color-primary);
  --form-error-color: #E53E3E;
  --form-success-color: #38A169;
}