/**
 * ZEISS Design Tokens
 * ====================
 * Brand-compliant design system for ZEISS India Partner Portal
 *
 * Version: 1.0.0
 * Created: 2026-02-05
 * Reference: ZEISS Brand Guidelines
 *
 * Usage:
 *   Import this file before zeiss-components.css
 *   <link rel="stylesheet" href="/css/zeiss-design-tokens.css">
 *   <link rel="stylesheet" href="/css/zeiss-components.css">
 */

/* ===========================================================================
   ZEISS COLOR PALETTE
   =========================================================================== */

:root {
  /* ===== PRIMARY BRAND COLORS ===== */
  --zeiss-primary: #003087;           /* ZEISS Blue - Primary brand color */
  --zeiss-primary-rgb: 0, 48, 135;    /* RGB values for rgba() usage */
  --zeiss-primary-dark: #002266;      /* Darker shade for hover states */
  --zeiss-primary-light: #0044aa;     /* Lighter shade for backgrounds */

  --zeiss-secondary: #001f5c;         /* Dark Blue - Secondary brand color */
  --zeiss-secondary-rgb: 0, 31, 92;
  --zeiss-secondary-dark: #001544;
  --zeiss-secondary-light: #002b7a;

  --zeiss-accent: #0066cc;            /* Light Blue - Accent/CTA color */
  --zeiss-accent-rgb: 0, 102, 204;
  --zeiss-accent-dark: #0055aa;
  --zeiss-accent-light: #0077ee;

  /* ===== NEUTRAL COLORS ===== */
  --zeiss-white: #ffffff;
  --zeiss-white-rgb: 255, 255, 255;

  --zeiss-black: #000000;
  --zeiss-black-rgb: 0, 0, 0;

  /* Gray Scale - 9 step scale from lightest to darkest */
  --zeiss-gray-50: #fafafa;           /* Lightest - subtle backgrounds */
  --zeiss-gray-100: #f5f5f5;          /* Light backgrounds */
  --zeiss-gray-200: #eeeeee;          /* Borders, dividers */
  --zeiss-gray-300: #e0e0e0;          /* Disabled states */
  --zeiss-gray-400: #bdbdbd;          /* Placeholder text */
  --zeiss-gray-500: #9e9e9e;          /* Secondary text */
  --zeiss-gray-600: #757575;          /* Body text (secondary) */
  --zeiss-gray-700: #616161;          /* Body text */
  --zeiss-gray-800: #333333;          /* Headings, primary text */
  --zeiss-gray-900: #212121;          /* Darkest text */

  /* ===== SEMANTIC COLORS ===== */
  --zeiss-success: #28a745;           /* Success states */
  --zeiss-success-light: #d4edda;
  --zeiss-success-dark: #1e7e34;

  --zeiss-warning: #ffc107;           /* Warning states */
  --zeiss-warning-light: #fff3cd;
  --zeiss-warning-dark: #d39e00;

  --zeiss-danger: #dc3545;            /* Error/danger states */
  --zeiss-danger-light: #f8d7da;
  --zeiss-danger-dark: #c82333;

  --zeiss-info: #17a2b8;              /* Informational states */
  --zeiss-info-light: #d1ecf1;
  --zeiss-info-dark: #117a8b;

  /* ===== BACKGROUND COLORS ===== */
  --zeiss-bg-primary: var(--zeiss-white);
  --zeiss-bg-secondary: var(--zeiss-gray-100);
  --zeiss-bg-tertiary: var(--zeiss-gray-50);
  --zeiss-bg-dark: var(--zeiss-secondary);
  --zeiss-bg-overlay: rgba(0, 31, 92, 0.9);

  /* ===== TEXT COLORS ===== */
  --zeiss-text-primary: var(--zeiss-gray-800);
  --zeiss-text-secondary: var(--zeiss-gray-600);
  --zeiss-text-muted: var(--zeiss-gray-500);
  --zeiss-text-inverse: var(--zeiss-white);
  --zeiss-text-link: var(--zeiss-accent);
  --zeiss-text-link-hover: var(--zeiss-primary);

  /* ===== BORDER COLORS ===== */
  --zeiss-border-light: var(--zeiss-gray-200);
  --zeiss-border-default: var(--zeiss-gray-300);
  --zeiss-border-dark: var(--zeiss-gray-400);
  --zeiss-border-focus: var(--zeiss-accent);


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

  /* ===== FONT FAMILIES ===== */
  --zeiss-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --zeiss-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --zeiss-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;

  /* ===== FONT SIZES ===== */
  /* Base: 16px (1rem) */
  --zeiss-text-xs: 0.75rem;           /* 12px - fine print, badges */
  --zeiss-text-sm: 0.875rem;          /* 14px - secondary text, captions */
  --zeiss-text-base: 1rem;            /* 16px - body text */
  --zeiss-text-lg: 1.125rem;          /* 18px - emphasized body */
  --zeiss-text-xl: 1.25rem;           /* 20px - subheadings */
  --zeiss-text-2xl: 1.5rem;           /* 24px - section titles */
  --zeiss-text-3xl: 1.875rem;         /* 30px - page titles */
  --zeiss-text-4xl: 2.25rem;          /* 36px - hero headlines */
  --zeiss-text-5xl: 3rem;             /* 48px - display headlines */
  --zeiss-text-6xl: 3.75rem;          /* 60px - large display */

  /* ===== FONT WEIGHTS ===== */
  --zeiss-font-light: 300;
  --zeiss-font-normal: 400;
  --zeiss-font-medium: 500;
  --zeiss-font-semibold: 600;
  --zeiss-font-bold: 700;
  --zeiss-font-extrabold: 800;

  /* ===== LINE HEIGHTS ===== */
  --zeiss-leading-none: 1;
  --zeiss-leading-tight: 1.25;
  --zeiss-leading-snug: 1.375;
  --zeiss-leading-normal: 1.5;
  --zeiss-leading-relaxed: 1.625;
  --zeiss-leading-loose: 2;

  /* ===== LETTER SPACING ===== */
  --zeiss-tracking-tighter: -0.05em;
  --zeiss-tracking-tight: -0.025em;
  --zeiss-tracking-normal: 0;
  --zeiss-tracking-wide: 0.025em;
  --zeiss-tracking-wider: 0.05em;
  --zeiss-tracking-widest: 0.1em;


  /* ===========================================================================
     SPACING SCALE
     =========================================================================== */

  /* Base unit: 4px */
  --zeiss-space-0: 0;
  --zeiss-space-1: 0.25rem;           /* 4px */
  --zeiss-space-2: 0.5rem;            /* 8px */
  --zeiss-space-3: 0.75rem;           /* 12px */
  --zeiss-space-4: 1rem;              /* 16px */
  --zeiss-space-5: 1.25rem;           /* 20px */
  --zeiss-space-6: 1.5rem;            /* 24px */
  --zeiss-space-8: 2rem;              /* 32px */
  --zeiss-space-10: 2.5rem;           /* 40px */
  --zeiss-space-12: 3rem;             /* 48px */
  --zeiss-space-16: 4rem;             /* 64px */
  --zeiss-space-20: 5rem;             /* 80px */
  --zeiss-space-24: 6rem;             /* 96px */
  --zeiss-space-32: 8rem;             /* 128px */

  /* ===== COMPONENT-SPECIFIC SPACING ===== */
  --zeiss-padding-btn-x: var(--zeiss-space-6);
  --zeiss-padding-btn-y: var(--zeiss-space-3);
  --zeiss-padding-input-x: var(--zeiss-space-4);
  --zeiss-padding-input-y: var(--zeiss-space-3);
  --zeiss-padding-card: var(--zeiss-space-6);
  --zeiss-padding-section: var(--zeiss-space-20);
  --zeiss-gap-form: var(--zeiss-space-4);
  --zeiss-gap-grid: var(--zeiss-space-6);


  /* ===========================================================================
     BORDER RADIUS
     =========================================================================== */

  --zeiss-radius-none: 0;
  --zeiss-radius-sm: 4px;             /* Small elements: badges, tags */
  --zeiss-radius-md: 8px;             /* Medium elements: buttons, inputs */
  --zeiss-radius-lg: 12px;            /* Large elements: cards, modals */
  --zeiss-radius-xl: 16px;            /* Extra large: featured cards */
  --zeiss-radius-2xl: 24px;           /* Hero sections, large cards */
  --zeiss-radius-full: 9999px;        /* Pills, avatars, rounded buttons */


  /* ===========================================================================
     SHADOWS
     =========================================================================== */

  --zeiss-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --zeiss-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --zeiss-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --zeiss-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --zeiss-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --zeiss-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

  /* ===== BRANDED SHADOWS ===== */
  --zeiss-shadow-primary: 0 4px 14px rgba(0, 48, 135, 0.25);
  --zeiss-shadow-accent: 0 4px 14px rgba(0, 102, 204, 0.25);

  /* ===== INNER SHADOWS ===== */
  --zeiss-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ===== FOCUS RING ===== */
  --zeiss-ring-offset: 2px;
  --zeiss-ring-width: 3px;
  --zeiss-ring-color: rgba(0, 102, 204, 0.4);
  --zeiss-focus-ring: 0 0 0 var(--zeiss-ring-offset) var(--zeiss-white),
                      0 0 0 calc(var(--zeiss-ring-offset) + var(--zeiss-ring-width)) var(--zeiss-ring-color);


  /* ===========================================================================
     TRANSITIONS & ANIMATIONS
     =========================================================================== */

  /* ===== DURATION ===== */
  --zeiss-duration-75: 75ms;
  --zeiss-duration-100: 100ms;
  --zeiss-duration-150: 150ms;
  --zeiss-duration-200: 200ms;
  --zeiss-duration-300: 300ms;
  --zeiss-duration-500: 500ms;
  --zeiss-duration-700: 700ms;
  --zeiss-duration-1000: 1000ms;

  /* ===== TIMING FUNCTIONS ===== */
  --zeiss-ease-linear: linear;
  --zeiss-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --zeiss-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --zeiss-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --zeiss-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== COMMON TRANSITIONS ===== */
  --zeiss-transition-fast: all var(--zeiss-duration-150) var(--zeiss-ease-in-out);
  --zeiss-transition-base: all var(--zeiss-duration-200) var(--zeiss-ease-in-out);
  --zeiss-transition-slow: all var(--zeiss-duration-300) var(--zeiss-ease-in-out);
  --zeiss-transition-colors: background-color var(--zeiss-duration-200) var(--zeiss-ease-in-out),
                             border-color var(--zeiss-duration-200) var(--zeiss-ease-in-out),
                             color var(--zeiss-duration-200) var(--zeiss-ease-in-out);
  --zeiss-transition-shadow: box-shadow var(--zeiss-duration-200) var(--zeiss-ease-in-out);
  --zeiss-transition-transform: transform var(--zeiss-duration-200) var(--zeiss-ease-in-out);


  /* ===========================================================================
     BREAKPOINTS (for reference - use @media queries)
     =========================================================================== */

  /*
   * Mobile-first breakpoints:
   * --zeiss-screen-sm: 640px;   - Small tablets, large phones
   * --zeiss-screen-md: 768px;   - Tablets
   * --zeiss-screen-lg: 1024px;  - Small desktops, laptops
   * --zeiss-screen-xl: 1280px;  - Desktops
   * --zeiss-screen-2xl: 1536px; - Large desktops
   */


  /* ===========================================================================
     Z-INDEX SCALE
     =========================================================================== */

  --zeiss-z-hide: -1;
  --zeiss-z-base: 0;
  --zeiss-z-docked: 10;
  --zeiss-z-dropdown: 1000;
  --zeiss-z-sticky: 1100;
  --zeiss-z-banner: 1200;
  --zeiss-z-overlay: 1300;
  --zeiss-z-modal: 1400;
  --zeiss-z-popover: 1500;
  --zeiss-z-tooltip: 1600;
  --zeiss-z-toast: 1700;


  /* ===========================================================================
     GRADIENTS
     =========================================================================== */

  --zeiss-gradient-primary: linear-gradient(135deg, var(--zeiss-primary) 0%, var(--zeiss-secondary) 100%);
  --zeiss-gradient-accent: linear-gradient(135deg, var(--zeiss-accent) 0%, var(--zeiss-primary) 100%);
  --zeiss-gradient-light: linear-gradient(180deg, var(--zeiss-white) 0%, var(--zeiss-gray-100) 100%);
  --zeiss-gradient-hero: linear-gradient(135deg, var(--zeiss-primary) 0%, var(--zeiss-accent) 50%, var(--zeiss-secondary) 100%);
  --zeiss-gradient-overlay: linear-gradient(180deg, rgba(0, 48, 135, 0) 0%, rgba(0, 31, 92, 0.8) 100%);


  /* ===========================================================================
     CONTAINER WIDTHS
     =========================================================================== */

  --zeiss-container-sm: 640px;
  --zeiss-container-md: 768px;
  --zeiss-container-lg: 1024px;
  --zeiss-container-xl: 1200px;
  --zeiss-container-2xl: 1400px;
}


/* ===========================================================================
   DARK MODE TOKENS (Optional - for future use)
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root.zeiss-dark-mode {
    --zeiss-bg-primary: #0d1117;
    --zeiss-bg-secondary: #161b22;
    --zeiss-bg-tertiary: #21262d;

    --zeiss-text-primary: #f0f6fc;
    --zeiss-text-secondary: #8b949e;
    --zeiss-text-muted: #6e7681;

    --zeiss-border-light: #21262d;
    --zeiss-border-default: #30363d;
    --zeiss-border-dark: #484f58;
  }
}


/* ===========================================================================
   UTILITY CLASSES (Generated from tokens)
   =========================================================================== */

/* Background Colors */
.zeiss-bg-primary { background-color: var(--zeiss-primary) !important; }
.zeiss-bg-secondary { background-color: var(--zeiss-secondary) !important; }
.zeiss-bg-accent { background-color: var(--zeiss-accent) !important; }
.zeiss-bg-white { background-color: var(--zeiss-white) !important; }
.zeiss-bg-gray-100 { background-color: var(--zeiss-gray-100) !important; }
.zeiss-bg-gray-800 { background-color: var(--zeiss-gray-800) !important; }

/* Text Colors */
.zeiss-text-primary { color: var(--zeiss-primary) !important; }
.zeiss-text-secondary { color: var(--zeiss-secondary) !important; }
.zeiss-text-accent { color: var(--zeiss-accent) !important; }
.zeiss-text-white { color: var(--zeiss-white) !important; }
.zeiss-text-gray-600 { color: var(--zeiss-gray-600) !important; }
.zeiss-text-gray-800 { color: var(--zeiss-gray-800) !important; }

/* Gradient Text */
.zeiss-text-gradient {
  background: var(--zeiss-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Border Colors */
.zeiss-border-primary { border-color: var(--zeiss-primary) !important; }
.zeiss-border-accent { border-color: var(--zeiss-accent) !important; }
.zeiss-border-light { border-color: var(--zeiss-border-light) !important; }

/* Shadow Utilities */
.zeiss-shadow-sm { box-shadow: var(--zeiss-shadow-sm) !important; }
.zeiss-shadow-md { box-shadow: var(--zeiss-shadow-md) !important; }
.zeiss-shadow-lg { box-shadow: var(--zeiss-shadow-lg) !important; }
.zeiss-shadow-xl { box-shadow: var(--zeiss-shadow-xl) !important; }
.zeiss-shadow-primary { box-shadow: var(--zeiss-shadow-primary) !important; }

/* Border Radius Utilities */
.zeiss-rounded-sm { border-radius: var(--zeiss-radius-sm) !important; }
.zeiss-rounded-md { border-radius: var(--zeiss-radius-md) !important; }
.zeiss-rounded-lg { border-radius: var(--zeiss-radius-lg) !important; }
.zeiss-rounded-xl { border-radius: var(--zeiss-radius-xl) !important; }
.zeiss-rounded-full { border-radius: var(--zeiss-radius-full) !important; }