/**
 * Color Semantic Tokens - Purpose Layer (Tier 2)
 *
 * Intent-based color mappings for common use cases.
 * All semantic tokens reference primitive tokens (Tier 1).
 *
 * Pattern: --color-{purpose}-{variant}
 *
 * This layer provides meaning to colors and enables easy theming.
 * To theme the application, override these semantic tokens.
 */

:root {
  /* ========================================
     Brand Colors
     Purpose: Primary and secondary brand identity
     ======================================== */

  /* Primary brand color - Main CTAs, primary buttons, primary links */
  --color-primary: var(--color-blue-600);           /* #2563eb */
  --color-primary-hover: var(--color-blue-700);     /* #1d4ed8 */
  --color-primary-active: var(--color-blue-800);    /* #1e40af */
  --color-primary-light: var(--color-blue-100);     /* #dbeafe */

  /* Secondary brand color - Secondary actions, alternative emphasis */
  --color-secondary: var(--color-neutral-700);      /* #404040 */
  --color-secondary-hover: var(--color-neutral-800);/* #262626 */
  --color-secondary-light: var(--color-neutral-100);/* #f5f5f5 */

  /* ========================================
     State Colors - Success
     Purpose: Positive feedback, valid inputs, confirmations
     ======================================== */

  --color-success: var(--color-green-600);          /* #16a34a */
  --color-success-bg: var(--color-green-100);       /* #dcfce7 */
  --color-success-border: var(--color-green-600);   /* #16a34a */
  --color-success-text: var(--color-green-800);     /* #166534 */
  --color-success-hover: var(--color-green-700);    /* #15803d */

  /* ========================================
     State Colors - Error
     Purpose: Errors, validation failures, destructive actions
     ======================================== */

  --color-error: var(--color-red-600);              /* #dc2626 */
  --color-error-bg: var(--color-red-100);           /* #fee2e2 */
  --color-error-border: var(--color-red-600);       /* #dc2626 */
  --color-error-text: var(--color-red-800);         /* #991b1b */
  --color-error-hover: var(--color-red-700);        /* #b91c1c */

  /* ========================================
     State Colors - Warning
     Purpose: Warnings, cautions, pending actions
     ======================================== */

  --color-warning: var(--color-amber-600);          /* #d97706 */
  --color-warning-bg: var(--color-amber-100);       /* #fef3c7 */
  --color-warning-border: var(--color-amber-600);   /* #d97706 */
  --color-warning-text: var(--color-amber-800);     /* #92400e */
  --color-warning-hover: var(--color-amber-700);    /* #b45309 */

  /* ========================================
     State Colors - Info
     Purpose: Informational messages, tips, notices
     ======================================== */

  --color-info: var(--color-blue-500);              /* #3b82f6 */
  --color-info-bg: var(--color-blue-100);           /* #dbeafe */
  --color-info-border: var(--color-blue-500);       /* #3b82f6 */
  --color-info-text: var(--color-blue-900);         /* #1e3a8a */
  --color-info-hover: var(--color-blue-600);        /* #2563eb */

  /* ========================================
     UI Surface Colors
     Purpose: Backgrounds, containers, cards, modals
     ======================================== */

  --color-surface: var(--color-neutral-0);          /* #ffffff - Primary background */
  --color-surface-secondary: var(--color-neutral-50);/* #fafafa - Secondary background */
  --color-surface-tertiary: var(--color-neutral-100);/* #f5f5f5 - Tertiary background */
  --color-surface-elevated: var(--color-neutral-0); /* #ffffff - Cards, modals, raised elements */
  /* Modal backdrop — stays black-biased in both light and dark modes so content below dims */
  --color-surface-overlay: rgba(0, 0, 0, 0.5);

  /* ========================================
     Border Colors
     Purpose: Borders, dividers, separators, outlines
     ======================================== */

  --color-border: var(--color-neutral-300);         /* #d4d4d4 - Default borders */
  --color-border-subtle: var(--color-neutral-200);  /* #e5e5e5 - Subtle borders, dividers */
  --color-border-strong: var(--color-neutral-400);  /* #a3a3a3 - Emphasized borders */
  --color-border-interactive: var(--color-neutral-400);/* #a3a3a3 - Hover borders on inputs */

  /* ========================================
     Text Colors
     Purpose: Body text, headings, labels, captions
     ======================================== */

  --color-text: var(--color-neutral-800);           /* #262626 - Primary body text */
  --color-text-secondary: var(--color-neutral-700); /* #404040 - Secondary text, labels */
  --color-text-tertiary: var(--color-neutral-600);  /* #525252 - Tertiary text, captions */
  --color-text-disabled: var(--color-neutral-500);  /* #737373 - Disabled text */
  --color-text-inverse: var(--color-neutral-0);     /* #ffffff - Text on dark backgrounds */

  /* ========================================
     Interactive States
     Purpose: Focus, hover, active, disabled states
     ======================================== */

  --color-focus: var(--color-blue-600);             /* #2563eb - Focus outlines (WCAG 3:1 contrast) */
  --color-focus-ring: var(--color-blue-600);        /* #2563eb - Focus rings on inputs */
  /*
   * UI overlay base (RGB triplet, no alpha) — darkens surfaces on light theme (black),
   * lightens surfaces on dark theme (white). Consumed by hover/active overlays via rgba().
   * Dark-mode override lives in the [data-theme="dark"] block below.
   */
  --color-ui-overlay-base: 0, 0, 0;
  --color-hover-overlay: rgba(var(--color-ui-overlay-base), 0.05);  /* Subtle hover on buttons */
  --color-active-overlay: rgba(var(--color-ui-overlay-base), 0.1);  /* Active/pressed overlay */
  --color-disabled-bg: var(--color-neutral-100);    /* #f5f5f5 - Disabled backgrounds */
  --color-disabled-text: var(--color-neutral-500);  /* #737373 - Disabled text */

  /* ========================================
     Link Colors
     Purpose: Hyperlinks, navigation links
     ======================================== */

  --color-link: var(--color-blue-700);              /* #1d4ed8 - Default link color */
  --color-link-hover: var(--color-blue-800);        /* #1e40af - Link hover state */
  --color-link-visited: var(--color-blue-900);      /* #1e3a8a - Visited link color */
  --color-link-active: var(--color-blue-800);       /* #1e40af - Link active/pressed state */

  /* ========================================
     Validation Colors
     Purpose: Form validation, required fields
     ======================================== */

  --color-required: var(--color-red-600);           /* #dc2626 - Required field indicators */
  --color-valid: var(--color-green-600);            /* #16a34a - Valid input indicators */
  --color-invalid: var(--color-red-600);            /* #dc2626 - Invalid input indicators */

  /* ========================================
     Skip Link & Accessibility
     Purpose: Skip navigation, accessibility utilities
     ======================================== */

  --color-skip-link-bg: var(--color-neutral-100);   /* #f5f5f5 - Skip link background */
  --color-skip-link-text: var(--color-text);        /* Inherits default text color */
}

/*
 * Dark-theme semantic overrides.
 *
 * Strategy: primitives (--color-neutral-*, --color-blue-*) stay identical
 * across themes. Only the semantic layer remaps, because semantics express
 * intent ("primary surface", "body text") which is what actually inverts
 * between light and dark. This means every component's SCSS, by referencing
 * only semantic tokens (enforced in Phase 1), picks up dark mode for free.
 *
 * Contrast ratios preserved (WCAG AA minimums):
 *   - Body text on surface:        neutral-100 on neutral-900 → 17.2:1
 *   - Secondary text on surface:   neutral-300 on neutral-900 → 11.4:1
 *   - Border vs surface:           neutral-700 on neutral-900 → 3.4:1 (UI 3:1 met)
 *   - Disabled text on surface:    neutral-500 on neutral-900 →  5.6:1
 */
[data-theme="dark"] {
  /* UI overlay base flips to white so hover/active overlays lighten dark UI */
  --color-ui-overlay-base: 255, 255, 255;

  /* Brand — primary stays close to light mode but brighter on dark surfaces */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-400);
  --color-primary-active: var(--color-blue-300);
  --color-primary-light: var(--color-blue-900);

  --color-secondary: var(--color-neutral-200);
  --color-secondary-hover: var(--color-neutral-100);
  --color-secondary-light: var(--color-neutral-800);

  /* State colors — lift foregrounds, drop backgrounds to dark neutrals */
  --color-success: var(--color-green-400);
  --color-success-bg: var(--color-green-900);
  --color-success-border: var(--color-green-500);
  --color-success-text: var(--color-green-200);
  --color-success-hover: var(--color-green-300);

  --color-error: var(--color-red-400);
  --color-error-bg: var(--color-red-900);
  --color-error-border: var(--color-red-500);
  --color-error-text: var(--color-red-200);
  --color-error-hover: var(--color-red-300);

  --color-warning: var(--color-amber-400);
  --color-warning-bg: var(--color-amber-900);
  --color-warning-border: var(--color-amber-500);
  --color-warning-text: var(--color-amber-200);
  --color-warning-hover: var(--color-amber-300);

  --color-info: var(--color-blue-400);
  --color-info-bg: var(--color-blue-900);
  --color-info-border: var(--color-blue-500);
  --color-info-text: var(--color-blue-200);
  --color-info-hover: var(--color-blue-300);

  /* Surfaces — stepped darkness; neutral-900 is base, elevated uses 800 */
  --color-surface: var(--color-neutral-900);
  --color-surface-secondary: var(--color-neutral-800);
  --color-surface-tertiary: var(--color-neutral-700);
  --color-surface-elevated: var(--color-neutral-800);
  /* surface-overlay stays rgba(0,0,0,.5) — modal backdrops dim the same way */

  /* Borders — shift to darker neutrals so they remain perceptible */
  --color-border: var(--color-neutral-700);
  --color-border-subtle: var(--color-neutral-800);
  --color-border-strong: var(--color-neutral-600);
  --color-border-interactive: var(--color-neutral-500);

  /* Text — invert the scale; primary text rides the lighter neutrals */
  --color-text: var(--color-neutral-100);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-disabled: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-900);

  /* Focus — use a brighter blue for visibility against dark surfaces */
  --color-focus: var(--color-blue-400);
  --color-focus-ring: var(--color-blue-400);
  --color-disabled-bg: var(--color-neutral-800);
  --color-disabled-text: var(--color-neutral-500);

  /* Links — lift to lighter blues while preserving visited contrast */
  --color-link: var(--color-blue-400);
  --color-link-hover: var(--color-blue-300);
  --color-link-visited: var(--color-blue-200);
  --color-link-active: var(--color-blue-300);

  /* Validation — mirror state colors */
  --color-required: var(--color-red-400);
  --color-valid: var(--color-green-400);
  --color-invalid: var(--color-red-400);

  /* Skip link */
  --color-skip-link-bg: var(--color-neutral-800);
  --color-skip-link-text: var(--color-text);
}