/**
 * RICHMOND LIGHTING DESIGN SYSTEM
 * Design Tokens - CSS Custom Properties
 *
 * These tokens form the foundation of the visual language.
 * All components reference these variables for consistency.
 *
 * Usage: Include this file before any component styles.
 * <link rel="stylesheet" href="/docs/design/references/design-tokens.css">
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     BRAND IDENTITY
     Derived from Richmond Lighting legacy website and lighting industry context
     ═══════════════════════════════════════════════════════════════════════════ */

  /*
   * PRIMARY BRAND COLORS
   * The charcoal anchors the brand with professional sophistication.
   * Gold accents evoke brass fixtures and premium lighting quality.
   */
  --rl-brand-charcoal: #1a1a1a;
  --rl-brand-charcoal-soft: #2d2d2d;
  --rl-brand-charcoal-lighter: #404040;

  --rl-brand-brass: #b8956c;
  --rl-brand-brass-light: #d4b896;
  --rl-brand-brass-dark: #96774d;
  --rl-brand-brass-glow: rgba(184, 149, 108, 0.15);

  /* Legacy gold (retained for backward compatibility) */
  --rl-brand-gold: #c9a962;
  --rl-brand-gold-light: #e8d5a8;

  /* ═══════════════════════════════════════════════════════════════════════════
     NEUTRAL PALETTE
     Warm-tinted grays that complement brass accents
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Backgrounds - warm undertones */
  --rl-white: #ffffff;
  --rl-white-warm: #fefdfb;
  --rl-cream: #faf9f7;
  --rl-gray-50: #f7f6f4;
  --rl-gray-100: #f0efed;
  --rl-gray-150: #e8e7e4;
  --rl-gray-200: #dedcd8;
  --rl-gray-300: #c8c5c0;
  --rl-gray-400: #a19d96;
  --rl-gray-500: #7a7570;
  --rl-gray-600: #5c5854;
  --rl-gray-700: #3d3a37;
  --rl-gray-800: #292724;
  --rl-gray-900: #1a1918;

  /* ═══════════════════════════════════════════════════════════════════════════
     SEMANTIC COLORS
     Functional colors for UI states and feedback
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Success - Muted sage green (less saturated than typical Bootstrap green) */
  --rl-success: #4a7c59;
  --rl-success-light: #e8f0eb;
  --rl-success-dark: #3a6347;
  --rl-success-text: #2d4f38;

  /* Warning - Warm amber aligned with brass tones */
  --rl-warning: #d4a03a;
  --rl-warning-light: #fdf6e3;
  --rl-warning-dark: #b8872e;
  --rl-warning-text: #8a6520;

  /* Danger - Sophisticated terracotta red */
  --rl-danger: #c45c4a;
  --rl-danger-light: #fdf0ed;
  --rl-danger-dark: #a34a3a;
  --rl-danger-text: #8b3d30;

  /* Info - Cool slate blue */
  --rl-info: #5a7a94;
  --rl-info-light: #eef3f6;
  --rl-info-dark: #486175;
  --rl-info-text: #3d5264;

  /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     Architectural, clean type system
     ═══════════════════════════════════════════════════════════════════════════ */

  /*
   * Font Families — unified on the project-polish typography (2026-05-30)
   * Display: Fraunces - modern variable serif for headings / display moments
   * Body:    Instrument Sans - humanist sans for readable UI text
   * Accent:  Cormorant Garamond - elegant serif for special moments
   * Mono:    IBM Plex Mono - technical content (SKUs, specs, code)
   */
  --rl-font-display: 'Fraunces', Georgia, serif;
  --rl-font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --rl-font-accent: 'Cormorant Garamond', 'Times New Roman', serif;
  --rl-font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', monospace;

  /* Fallback to current system (Inter) if web fonts not loaded */
  --rl-font-system: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type Scale - Minor third (1.2) with pixel-perfect values */
  --rl-text-xs: 0.694rem;    /* ~11px - micro labels */
  --rl-text-sm: 0.833rem;    /* ~13px - captions, hints */
  --rl-text-base: 1rem;      /* 16px - body text */
  --rl-text-md: 1.125rem;    /* 18px - lead paragraphs */
  --rl-text-lg: 1.25rem;     /* 20px - section headers */
  --rl-text-xl: 1.5rem;      /* 24px - page subtitles */
  --rl-text-2xl: 1.875rem;   /* 30px - page titles */
  --rl-text-3xl: 2.25rem;    /* 36px - hero titles */
  --rl-text-4xl: 3rem;       /* 48px - display */

  /* Font Weights */
  --rl-weight-light: 300;
  --rl-weight-regular: 400;
  --rl-weight-medium: 500;
  --rl-weight-semibold: 600;
  --rl-weight-bold: 700;

  /* Line Heights */
  --rl-leading-none: 1;
  --rl-leading-tight: 1.2;
  --rl-leading-snug: 1.375;
  --rl-leading-normal: 1.5;
  --rl-leading-relaxed: 1.625;
  --rl-leading-loose: 1.8;

  /* Letter Spacing */
  --rl-tracking-tighter: -0.02em;
  --rl-tracking-tight: -0.01em;
  --rl-tracking-normal: 0;
  --rl-tracking-wide: 0.025em;
  --rl-tracking-wider: 0.05em;
  --rl-tracking-widest: 0.1em;
  --rl-tracking-caps: 0.15em;  /* For uppercase text */

  /* ═══════════════════════════════════════════════════════════════════════════
     SPACING SCALE
     8px base unit for consistent rhythm
     ═══════════════════════════════════════════════════════════════════════════ */

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

  /* ═══════════════════════════════════════════════════════════════════════════
     BORDERS & RADII
     Subtle, refined corners and borders
     ═══════════════════════════════════════════════════════════════════════════ */

  --rl-radius-none: 0;
  --rl-radius-sm: 3px;
  --rl-radius-md: 6px;       /* Default for inputs, small cards */
  --rl-radius-lg: 8px;       /* Cards, modals */
  --rl-radius-xl: 12px;      /* Large containers */
  --rl-radius-2xl: 16px;     /* Feature cards */
  --rl-radius-full: 9999px;  /* Pills, avatars */

  /* Border widths */
  --rl-border-width: 1px;
  --rl-border-width-2: 2px;
  --rl-border-width-4: 4px;

  /* Border colors */
  --rl-border-light: var(--rl-gray-150);
  --rl-border-default: var(--rl-gray-200);
  --rl-border-strong: var(--rl-gray-300);
  --rl-border-dark: var(--rl-gray-400);

  /* ═══════════════════════════════════════════════════════════════════════════
     SHADOWS & ELEVATION
     Subtle, warm-tinted shadows for depth
     ═══════════════════════════════════════════════════════════════════════════ */

  --rl-shadow-xs: 0 1px 2px rgba(26, 25, 24, 0.04);
  --rl-shadow-sm: 0 1px 3px rgba(26, 25, 24, 0.06), 0 1px 2px rgba(26, 25, 24, 0.04);
  --rl-shadow-md: 0 4px 6px rgba(26, 25, 24, 0.05), 0 2px 4px rgba(26, 25, 24, 0.04);
  --rl-shadow-lg: 0 10px 15px rgba(26, 25, 24, 0.06), 0 4px 6px rgba(26, 25, 24, 0.04);
  --rl-shadow-xl: 0 20px 25px rgba(26, 25, 24, 0.08), 0 10px 10px rgba(26, 25, 24, 0.04);
  --rl-shadow-2xl: 0 25px 50px rgba(26, 25, 24, 0.15);

  /* Overlay elevation — popovers / floating menus that sit over same-coloured
     white cards, where a soft drop shadow alone gives no separation. Pairs a
     crisp 1px edge ring with the deepest drop so the surface reads as a
     distinct plane. Composed from theme-aware tokens (border-strong + 2xl),
     so it remaps under dark mode automatically — no per-theme copy needed. */
  --rl-shadow-popover: 0 0 0 1px var(--rl-border-strong), var(--rl-shadow-2xl);

  /* Brass accent glow for interactive elements */
  --rl-shadow-brass: 0 0 0 3px var(--rl-brand-brass-glow);
  --rl-shadow-focus: 0 0 0 2px var(--rl-white), 0 0 0 4px var(--rl-brand-brass);

  /* Inner shadows */
  --rl-shadow-inner: inset 0 2px 4px rgba(26, 25, 24, 0.04);
  --rl-shadow-inner-lg: inset 0 4px 8px rgba(26, 25, 24, 0.08);

  /* ═══════════════════════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATION
     Refined, purposeful motion
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Durations */
  --rl-duration-instant: 0ms;
  --rl-duration-fast: 100ms;
  --rl-duration-normal: 200ms;
  --rl-duration-slow: 300ms;
  --rl-duration-slower: 500ms;

  /* Easing curves */
  --rl-ease-linear: linear;
  --rl-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --rl-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --rl-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --rl-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Common transitions */
  --rl-transition-colors: color var(--rl-duration-normal) var(--rl-ease-out),
                          background-color var(--rl-duration-normal) var(--rl-ease-out),
                          border-color var(--rl-duration-normal) var(--rl-ease-out);
  --rl-transition-transform: transform var(--rl-duration-normal) var(--rl-ease-out);
  --rl-transition-shadow: box-shadow var(--rl-duration-normal) var(--rl-ease-out);
  --rl-transition-all: all var(--rl-duration-normal) var(--rl-ease-out);

  /* ═══════════════════════════════════════════════════════════════════════════
     LAYOUT & CONTAINERS
     Responsive container widths
     ═══════════════════════════════════════════════════════════════════════════ */

  --rl-container-sm: 640px;
  --rl-container-md: 768px;
  --rl-container-lg: 1024px;
  --rl-container-xl: 1280px;
  --rl-container-2xl: 1536px;
  --rl-container-max: 1600px;  /* Max content width */

  /* Sidebar width */
  --rl-sidebar-width: 260px;
  --rl-sidebar-width-collapsed: 72px;

  /* Header height */
  --rl-header-height: 64px;

  /* ═══════════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     Predictable layering system
     ═══════════════════════════════════════════════════════════════════════════ */

  --rl-z-behind: -1;
  --rl-z-base: 0;
  --rl-z-docked: 10;
  --rl-z-dropdown: 100;
  --rl-z-sticky: 200;
  --rl-z-fixed: 300;
  --rl-z-overlay: 400;
  --rl-z-modal: 500;
  --rl-z-popover: 600;
  --rl-z-tooltip: 700;
  --rl-z-toast: 800;
  --rl-z-max: 9999;

  /* ═══════════════════════════════════════════════════════════════════════════
     PLATFORM BADGES (Legacy support)
     Supplier platform identification colors
     ═══════════════════════════════════════════════════════════════════════════ */

  --rl-platform-shopify: #96bf48;
  --rl-platform-woocommerce: #96588a;
  --rl-platform-magento: #f26322;
  --rl-platform-bigcommerce: #34313f;
  --rl-platform-custom: var(--rl-brand-charcoal);
  --rl-platform-unknown: var(--rl-gray-400);

  /* ═══════════════════════════════════════════════════════════════════════════
     INTERACTIVE STATES
     Consistent hover/focus/active styling
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Hover overlays */
  --rl-hover-overlay-light: rgba(26, 25, 24, 0.04);
  --rl-hover-overlay-dark: rgba(255, 255, 255, 0.08);

  /* Focus ring */
  --rl-focus-ring-color: var(--rl-brand-brass);
  --rl-focus-ring-width: 2px;
  --rl-focus-ring-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK MODE TOKENS (Future enhancement)
   Apply with [data-theme="dark"] on <html> or <body>
   ═══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Neutrals — inverted warm grays */
  --rl-white: #1a1918;
  --rl-white-warm: #1f1e1c;
  --rl-cream: #242320;
  --rl-gray-50: #292724;
  --rl-gray-100: #333130;
  --rl-gray-150: #3d3b39;
  --rl-gray-200: #4a4846;
  --rl-gray-300: #5c5a57;
  --rl-gray-400: #7a7873;
  --rl-gray-500: #9a9893;
  --rl-gray-600: #b5b3ae;
  --rl-gray-700: #d1cfc9;
  --rl-gray-800: #e8e7e4;
  --rl-gray-900: #f7f6f4;

  /* Brand — charcoal inverts to light for text */
  --rl-brand-charcoal: #f7f6f4;
  --rl-brand-charcoal-soft: #e8e7e4;
  --rl-brand-charcoal-lighter: #d1cfc9;

  /* Brass — warmer and lighter for dark backgrounds */
  --rl-brand-brass: #c9a67d;
  --rl-brand-brass-light: #d4b896;
  --rl-brand-brass-dark: #b8956c;
  --rl-brand-brass-glow: rgba(201, 166, 125, 0.3);

  /* Semantic — desaturated and lighter for dark backgrounds */
  --rl-success: #5a9a6e;
  --rl-success-light: rgba(90, 154, 110, 0.15);
  --rl-success-dark: #4a8a5e;
  --rl-success-text: #7dbb8e;

  --rl-warning: #d9ad4a;
  --rl-warning-light: rgba(217, 173, 74, 0.15);
  --rl-warning-dark: #c99a3a;
  --rl-warning-text: #e0be6a;

  --rl-danger: #d46e5c;
  --rl-danger-light: rgba(212, 110, 92, 0.15);
  --rl-danger-dark: #c45e4c;
  --rl-danger-text: #e88a7a;

  --rl-info: #6a8faa;
  --rl-info-light: rgba(106, 143, 170, 0.15);
  --rl-info-dark: #5a7f9a;
  --rl-info-text: #8aafca;

  /* Borders */
  --rl-border-light: var(--rl-gray-200);
  --rl-border-default: var(--rl-gray-300);
  --rl-border-strong: var(--rl-gray-400);
  --rl-border-dark: var(--rl-gray-500);

  /* Shadows — deeper for dark mode */
  --rl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --rl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --rl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --rl-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
  --rl-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 8px 10px rgba(0, 0, 0, 0.3);
  --rl-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);

  --rl-shadow-brass: 0 0 0 3px var(--rl-brand-brass-glow);
  --rl-shadow-focus: 0 0 0 2px var(--rl-gray-100), 0 0 0 4px var(--rl-brand-brass);

  --rl-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --rl-shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.3);

  /* Overlays — inverted for dark backgrounds */
  --rl-hover-overlay-light: rgba(255, 255, 255, 0.06);
  --rl-hover-overlay-dark: rgba(0, 0, 0, 0.2);
}

/* System preference dark mode — for users with theme set to "system" (no data-theme attr) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --rl-white: #1a1918;
    --rl-white-warm: #1f1e1c;
    --rl-cream: #242320;
    --rl-gray-50: #292724;
    --rl-gray-100: #333130;
    --rl-gray-150: #3d3b39;
    --rl-gray-200: #4a4846;
    --rl-gray-300: #5c5a57;
    --rl-gray-400: #7a7873;
    --rl-gray-500: #9a9893;
    --rl-gray-600: #b5b3ae;
    --rl-gray-700: #d1cfc9;
    --rl-gray-800: #e8e7e4;
    --rl-gray-900: #f7f6f4;

    --rl-brand-charcoal: #f7f6f4;
    --rl-brand-charcoal-soft: #e8e7e4;
    --rl-brand-charcoal-lighter: #d1cfc9;

    --rl-brand-brass: #c9a67d;
    --rl-brand-brass-light: #d4b896;
    --rl-brand-brass-dark: #b8956c;
    --rl-brand-brass-glow: rgba(201, 166, 125, 0.3);

    --rl-success: #5a9a6e;
    --rl-success-light: rgba(90, 154, 110, 0.15);
    --rl-success-dark: #4a8a5e;
    --rl-success-text: #7dbb8e;

    --rl-warning: #d9ad4a;
    --rl-warning-light: rgba(217, 173, 74, 0.15);
    --rl-warning-dark: #c99a3a;
    --rl-warning-text: #e0be6a;

    --rl-danger: #d46e5c;
    --rl-danger-light: rgba(212, 110, 92, 0.15);
    --rl-danger-dark: #c45e4c;
    --rl-danger-text: #e88a7a;

    --rl-info: #6a8faa;
    --rl-info-light: rgba(106, 143, 170, 0.15);
    --rl-info-dark: #5a7f9a;
    --rl-info-text: #8aafca;

    --rl-border-light: var(--rl-gray-200);
    --rl-border-default: var(--rl-gray-300);
    --rl-border-strong: var(--rl-gray-400);
    --rl-border-dark: var(--rl-gray-500);

    --rl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --rl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --rl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --rl-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
    --rl-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 8px 10px rgba(0, 0, 0, 0.3);
    --rl-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);

    --rl-shadow-brass: 0 0 0 3px var(--rl-brand-brass-glow);
    --rl-shadow-focus: 0 0 0 2px var(--rl-gray-100), 0 0 0 4px var(--rl-brand-brass);

    --rl-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    --rl-shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.3);

    --rl-hover-overlay-light: rgba(255, 255, 255, 0.06);
    --rl-hover-overlay-dark: rgba(0, 0, 0, 0.2);
  }
}