/* IRIS Job Matching — Design Tokens (Premium Refonte)
 *
 * Apple-inspired premium design system.
 * Monochrome + single indigo accent.
 * These tokens ensure visual consistency across the entire application.
 *
 * Refonte: 2025-01-21
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════ */
  --iris-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --iris-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --iris-font-weight-normal: 400;
  --iris-font-weight-medium: 500;
  --iris-font-weight-semibold: 600;
  --iris-font-weight-bold: 700;
  --iris-font-weight-extrabold: 800;

  /* Refined type scale */
  --iris-text-2xs: 0.6875rem;  /* 11px */
  --iris-text-xs: 0.75rem;     /* 12px */
  --iris-text-sm: 0.8125rem;   /* 13px */
  --iris-text-md: 0.875rem;    /* 14px */
  --iris-text-base: 0.9375rem; /* 15px */
  --iris-text-lg: 1rem;        /* 16px */
  --iris-text-xl: 1.125rem;    /* 18px */
  --iris-text-2xl: 1.25rem;    /* 20px */
  --iris-text-3xl: 1.5rem;     /* 24px */
  --iris-text-4xl: 1.75rem;    /* 28px */
  --iris-text-5xl: 2rem;       /* 32px */

  --iris-leading-none: 1;
  --iris-leading-tight: 1.25;
  --iris-leading-snug: 1.375;
  --iris-leading-normal: 1.5;
  --iris-leading-relaxed: 1.625;

  --iris-tracking-tight: -0.025em;
  --iris-tracking-normal: 0;
  --iris-tracking-wide: 0.025em;
  --iris-tracking-wider: 0.05em;
  --iris-tracking-widest: 0.1em;

  /* ═══════════════════════════════════════════════════════════════
     COLOR PALETTE — PREMIUM MONOCHROME + SINGLE ACCENT
     ═══════════════════════════════════════════════════════════════ */

  /*
   * DESIGN DECISION: Warm whites and near-black text for premium feel.
   * Single indigo accent for CTAs and focus states.
   * No traffic light colors (green/yellow/red) for tier indicators.
   */

  /* Neutrals (zinc scale - warmer than cool gray) */
  --iris-zinc-25: #FAFAFA;
  --iris-zinc-50: #F5F5F5;
  --iris-zinc-100: #F0F0F0;
  --iris-zinc-200: #E4E4E7;
  --iris-zinc-300: #D4D4D8;
  --iris-zinc-400: #A1A1AA;
  --iris-zinc-500: #71717A;
  --iris-zinc-600: #52525B;
  --iris-zinc-700: #3F3F46;
  --iris-zinc-800: #27272A;
  --iris-zinc-900: #18181B;
  --iris-zinc-950: #09090B;

  /* Legacy gray aliases (backward compatibility) */
  --iris-gray-25: var(--iris-zinc-25);
  --iris-gray-50: var(--iris-zinc-50);
  --iris-gray-100: var(--iris-zinc-100);
  --iris-gray-200: var(--iris-zinc-200);
  --iris-gray-300: var(--iris-zinc-300);
  --iris-gray-400: var(--iris-zinc-400);
  --iris-gray-500: var(--iris-zinc-500);
  --iris-gray-600: var(--iris-zinc-600);
  --iris-gray-700: var(--iris-zinc-700);
  --iris-gray-800: var(--iris-zinc-800);
  --iris-gray-900: var(--iris-zinc-900);
  --iris-gray-950: var(--iris-zinc-950);

  /* Primary accent (indigo - SINGLE accent color) */
  --iris-primary-50: #EEF2FF;
  --iris-primary-100: #E0E7FF;
  --iris-primary-200: #C7D2FE;
  --iris-primary-300: #A5B4FC;
  --iris-primary-400: #818CF8;
  --iris-primary-500: #6366F1;
  --iris-primary-600: #4F46E5;
  --iris-primary-700: #4338CA;
  --iris-primary-800: #3730A3;
  --iris-primary-900: #312E81;

  /* ═══════════════════════════════════════════════════════════════
     ACCENT TOKENS (Single color system)
     ═══════════════════════════════════════════════════════════════ */
  --iris-accent: #6366F1;           /* Primary CTA color */
  --iris-accent-hover: #4F46E5;     /* Hover state */
  --iris-accent-active: #4338CA;    /* Active/pressed state */
  --iris-accent-soft: #EEF2FF;      /* Subtle backgrounds */
  --iris-accent-muted: #C7D2FE;     /* Muted accent */
  --iris-accent-text: #6366F1;      /* Text in accent color */

  /* Secondary brand accent — inovAite gold (logo). Used sparingly:
     signature moments (Situation Assessment, IRIS sparkle, premium badges).
     Indigo remains the single primary accent. */
  --iris-gold: #C9A227;
  --iris-gold-strong: #A8861D;
  --iris-gold-soft: #FBF6E7;
  --iris-gold-border: #E8D9A8;

  /* ═══════════════════════════════════════════════════════════════
     SEMANTIC COLORS (Desaturated for premium feel)
     ═══════════════════════════════════════════════════════════════ */

  /*
   * DESIGN DECISION: Semantic colors are desaturated and only used
   * for status chips and alerts, NOT for tier/match indicators.
   */

  /* Positive (desaturated green) */
  --iris-positive-text: #166534;
  --iris-positive-bg: #F0FDF4;
  --iris-positive-border: #BBF7D0;

  /* Caution (desaturated amber) */
  --iris-caution-text: #854D0E;
  --iris-caution-bg: #FEFCE8;
  --iris-caution-border: #FEF08A;

  /* Alert (desaturated red) */
  --iris-alert-text: #991B1B;
  --iris-alert-bg: #FEF2F2;
  --iris-alert-border: #FECACA;

  /* Neutral (for "not met" or neutral states) */
  --iris-neutral-text: #3F3F46;
  --iris-neutral-bg: #F4F4F5;
  --iris-neutral-border: #E4E4E7;

  /* Legacy semantic aliases (backward compatibility) */
  --iris-success-50: var(--iris-positive-bg);
  --iris-success-500: #10B981;
  --iris-success-600: #059669;

  --iris-warning-50: var(--iris-caution-bg);
  --iris-warning-500: #F59E0B;
  --iris-warning-600: #D97706;

  --iris-error-50: var(--iris-alert-bg);
  --iris-error-500: #EF4444;
  --iris-error-600: #DC2626;

  /* ═══════════════════════════════════════════════════════════════
     TIER SYSTEM (Dots) — INDIGO INTENSITY SCALE
     ═══════════════════════════════════════════════════════════════ */

  /*
   * DESIGN DECISION: Tiers use indigo intensity, not traffic light colors.
   * Dots only, no text labels. Visual hierarchy through opacity/intensity.
   *
   * ●●●●●  (5/5) - tier-5 - Former "strong"
   * ●●●●○  (4/5) - tier-4 - Former "good"
   * ●●●○○  (3/5) - tier-3 - Former "partial"
   * ●●○○○  (2/5) - tier-2 - Former "low"
   * ●○○○○  (1/5) - tier-1 - Former "limited"
   * ○○○○○  (0/5) - tier-0 - Former "verify" (needs verification)
   */

  --iris-tier-5: #4F46E5;     /* Indigo-600: Highest tier */
  --iris-tier-4: #6366F1;     /* Indigo-500 */
  --iris-tier-3: #818CF8;     /* Indigo-400 */
  --iris-tier-2: #A5B4FC;     /* Indigo-300 */
  --iris-tier-1: #C7D2FE;     /* Indigo-200 */
  --iris-tier-0: #A1A1AA;     /* Zinc-400: Needs verification */

  /* Tier dot states */
  --iris-tier-dot-filled: var(--iris-accent);
  --iris-tier-dot-empty: var(--iris-zinc-300);
  --iris-tier-dot-size: 8px;
  --iris-tier-dot-gap: 3px;

  /* Progress bar colors (monochrome) */
  --iris-progress-track: var(--iris-zinc-200);
  --iris-progress-fill: var(--iris-accent);

  /* ═══════════════════════════════════════════════════════════════
     LEGACY MATCH COLORS (Deprecated - kept for backward compat)
     Will be removed in future version. Use tier-* tokens instead.
     ═══════════════════════════════════════════════════════════════ */
  --match-strong: var(--iris-tier-5);
  --match-good: var(--iris-tier-4);
  --match-partial: var(--iris-tier-3);
  --match-low: var(--iris-tier-2);
  --match-limited: var(--iris-tier-1);
  --match-verify: var(--iris-tier-0);

  --match-strong-bg: var(--iris-accent-soft);
  --match-good-bg: var(--iris-accent-soft);
  --match-partial-bg: var(--iris-accent-soft);
  --match-low-bg: var(--iris-accent-soft);
  --match-limited-bg: var(--iris-zinc-100);
  --match-verify-bg: var(--iris-zinc-100);

  /* ═══════════════════════════════════════════════════════════════
     SURFACES
     ═══════════════════════════════════════════════════════════════ */

  /*
   * DESIGN DECISION: Warm whites for surfaces.
   * #FAFAFA as main background, pure white for elevated cards.
   */

  --iris-surface-bg: #FAFAFA;        /* Page background */
  --iris-surface: #FFFFFF;           /* Card/panel background */
  --iris-surface-raised: #FFFFFF;    /* Elevated elements */
  --iris-surface-elevated: #FFFFFF;  /* Alias for raised */
  --iris-surface-muted: #F5F5F5;     /* Subtle background */
  --iris-surface-sunken: #F0F0F0;    /* Inset/recessed areas */

  /* Glass effects */
  --iris-surface-glass: rgba(255, 255, 255, 0.85);
  --iris-surface-glass-soft: rgba(255, 255, 255, 0.70);
  --iris-surface-glass-strong: rgba(255, 255, 255, 0.95);

  /* Overlay */
  --iris-surface-overlay: rgba(0, 0, 0, 0.02);
  --iris-surface-overlay-hover: rgba(0, 0, 0, 0.04);
  --iris-surface-ink: rgba(0, 0, 0, 0.02);
  --iris-surface-ink-hover: rgba(0, 0, 0, 0.04);
  --iris-surface-ink-strong: rgba(0, 0, 0, 0.06);

  /* ═══════════════════════════════════════════════════════════════
     INK (Text Colors)
     ═══════════════════════════════════════════════════════════════ */

  /*
   * DESIGN DECISION: Near-black (#18181B) for primary text.
   * Better contrast and more premium than gray-900.
   */

  --iris-ink: #18181B;               /* Primary text (near-black) */
  --iris-ink-primary: #18181B;       /* Alias */
  --iris-ink-secondary: #52525B;     /* Secondary text */
  --iris-ink-muted: #71717A;         /* Muted/helper text */
  --iris-ink-subtle: #7C7C85;        /* Subtle text — darkened for AA-adjacent contrast (was #A1A1AA, 2.6:1) */
  --iris-ink-disabled: #D4D4D8;      /* Disabled text */
  --iris-ink-inverse: #FFFFFF;       /* Text on dark backgrounds */

  /* ═══════════════════════════════════════════════════════════════
     SPACING SCALE
     ═══════════════════════════════════════════════════════════════ */
  --iris-space-px: 1px;
  --iris-space-0: 0;
  --iris-space-0-5: 0.125rem;  /* 2px */
  --iris-space-1: 0.25rem;     /* 4px */
  --iris-space-1-5: 0.375rem;  /* 6px */
  --iris-space-2: 0.5rem;      /* 8px */
  --iris-space-2-5: 0.625rem;  /* 10px */
  --iris-space-3: 0.75rem;     /* 12px */
  --iris-space-3-5: 0.875rem;  /* 14px */
  --iris-space-4: 1rem;        /* 16px */
  --iris-space-5: 1.25rem;     /* 20px */
  --iris-space-6: 1.5rem;      /* 24px */
  --iris-space-7: 1.75rem;     /* 28px */
  --iris-space-8: 2rem;        /* 32px */
  --iris-space-10: 2.5rem;     /* 40px */
  --iris-space-12: 3rem;       /* 48px */
  --iris-space-16: 4rem;       /* 64px */
  --iris-space-20: 5rem;       /* 80px */
  --iris-space-24: 6rem;       /* 96px */

  /* ═══════════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════════ */
  --iris-radius-none: 0;
  --iris-radius-sm: 0.375rem;   /* 6px */
  --iris-radius-md: 0.5rem;     /* 8px */
  --iris-radius-lg: 0.75rem;    /* 12px */
  --iris-radius-xl: 1rem;       /* 16px */
  --iris-radius-2xl: 1.25rem;   /* 20px */
  --iris-radius-3xl: 1.5rem;    /* 24px */
  --iris-radius-pill: 9999px;

  /* ═══════════════════════════════════════════════════════════════
     SHADOWS (Premium, Apple-inspired)
     ═══════════════════════════════════════════════════════════════ */

  /*
   * DESIGN DECISION: Shadows instead of borders for depth.
   * Subtle, layered shadows for premium feel.
   */

  --iris-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --iris-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --iris-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02);
  --iris-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.02);
  --iris-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.02);
  --iris-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.12);

  /* Colored shadows (accent) */
  --iris-shadow-accent: 0 4px 14px -2px rgba(79, 70, 229, 0.20);
  --iris-shadow-accent-lg: 0 10px 25px -4px rgba(79, 70, 229, 0.15);

  /* Legacy aliases */
  --iris-shadow-primary: var(--iris-shadow-accent);
  --iris-shadow-primary-lg: var(--iris-shadow-accent-lg);

  /* Panel shadows */
  --iris-shadow-card: var(--iris-shadow-md);
  --iris-shadow-card-hover: var(--iris-shadow-lg);
  --iris-shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.06);
  --iris-shadow-sticky: 0 4px 20px rgba(0, 0, 0, 0.06);
  --iris-shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --iris-shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.08);

  /* ═══════════════════════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════════════════════ */

  /*
   * DESIGN DECISION: Very subtle borders, prefer shadows for depth.
   */

  --iris-border-transparent: transparent;
  --iris-border-subtle: rgba(0, 0, 0, 0.04);
  --iris-border-soft: rgba(0, 0, 0, 0.06);
  --iris-border: rgba(0, 0, 0, 0.08);
  --iris-border-medium: rgba(0, 0, 0, 0.10);
  --iris-border-strong: rgba(0, 0, 0, 0.12);
  --iris-border-heavy: rgba(0, 0, 0, 0.16);

  /* Accent border */
  --iris-border-accent: var(--iris-accent);
  --iris-border-accent-soft: var(--iris-primary-200);

  /* ═══════════════════════════════════════════════════════════════
     MOTION & TRANSITIONS
     ═══════════════════════════════════════════════════════════════ */
  --iris-duration-instant: 50ms;
  --iris-duration-fast: 100ms;
  --iris-duration: 150ms;
  --iris-duration-normal: 200ms;
  --iris-duration-slow: 300ms;
  --iris-duration-slower: 400ms;
  --iris-duration-slowest: 500ms;

  /* Easing curves */
  --iris-ease: cubic-bezier(0.4, 0, 0.2, 1);        /* Standard */
  --iris-ease-in: cubic-bezier(0.4, 0, 1, 1);       /* Accelerate */
  --iris-ease-out: cubic-bezier(0, 0, 0.2, 1);      /* Decelerate */
  --iris-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Standard */
  --iris-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --iris-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ═══════════════════════════════════════════════════════════════
     FOCUS & INTERACTION
     ═══════════════════════════════════════════════════════════════ */
  --iris-focus-ring: 0 0 0 2px var(--iris-surface), 0 0 0 4px var(--iris-primary-400);
  --iris-focus-ring-inset: inset 0 0 0 2px var(--iris-primary-400);
  --iris-focus-ring-offset: 2px;

  /* ═══════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════════ */
  --iris-z-base: 0;
  --iris-z-raised: 10;
  --iris-z-dropdown: 20;
  --iris-z-sticky: 30;
  --iris-z-fixed: 40;
  --iris-z-modal-backdrop: 45;
  --iris-z-modal: 50;
  --iris-z-drawer: 55;
  --iris-z-popover: 60;
  --iris-z-tooltip: 70;
  --iris-z-toast: 80;
  --iris-z-max: 100;

  /* ═══════════════════════════════════════════════════════════════
     BACKDROP BLUR
     ═══════════════════════════════════════════════════════════════ */
  --iris-blur-sm: 0px;
  --iris-blur-md: 8px;
  --iris-blur-lg: 12px;
  --iris-blur-xl: 16px;
  --iris-blur-2xl: 24px;

  /* ═══════════════════════════════════════════════════════════════
     STATUS CHIP COLORS
     ═══════════════════════════════════════════════════════════════ */

  /*
   * Status chips use desaturated semantic colors.
   * These are for the factual status labels (progress/review/not-progress/disqualified)
   */

  /* Progress: "Criteria documented" */
  --iris-status-progress-text: var(--iris-positive-text);
  --iris-status-progress-bg: var(--iris-positive-bg);
  --iris-status-progress-icon: var(--iris-positive-text);

  /* Review: "Potential fit" */
  --iris-status-review-text: var(--iris-caution-text);
  --iris-status-review-bg: var(--iris-caution-bg);
  --iris-status-review-icon: var(--iris-caution-text);

  /* Not Progress: "Missing information" */
  --iris-status-not-progress-text: var(--iris-neutral-text);
  --iris-status-not-progress-bg: var(--iris-neutral-bg);
  --iris-status-not-progress-icon: var(--iris-neutral-text);

  /* Disqualified: "Verification required (policy)" */
  --iris-status-disqualified-text: var(--iris-alert-text);
  --iris-status-disqualified-bg: var(--iris-alert-bg);
  --iris-status-disqualified-icon: var(--iris-alert-text);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE TOKENS (future-ready)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Can be enabled later for dark mode support */
  }
}