/*
 * Monitor Precios ML — Design Tokens (Light Theme)
 * Source of truth for all design decisions.
 * Derived from claims-app dark design language, adapted to a light B2B SaaS theme.
 *
 * Usage: import via <link rel="stylesheet" href="/static/design-tokens.css">
 * Then consume tokens in any other CSS: color: var(--color-text);
 *
 * Generated: 2026-06-12
 * DO NOT add dark-mode rules here — light theme only (project rule #4).
 */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
   * BRAND / PRIMARY
   * Preserves claims-app's signature blue (#4E9AFF) shifted slightly deeper
   * for WCAG AA contrast on white backgrounds.
   * ───────────────────────────────────────────────────────────────────────── */
  --color-primary:          #2C7FE8;   /* Main CTA, links, active states */
  --color-primary-hover:    #1A6DD4;   /* Hover / pressed */
  --color-primary-light:    #EBF3FD;   /* Soft bg for primary tinted surfaces */
  --color-primary-subtle:   rgba(44, 127, 232, 0.10); /* Ghost / selection ring */

  /* Accent — claims-app's yellow (#FFD740) used for focus rings & active markers */
  --color-accent:           #F5A623;   /* Warm amber — more WCAG-friendly on light */
  --color-accent-hover:     #E09218;
  --color-accent-light:     #FEF6E7;

  /* ─────────────────────────────────────────────────────────────────────────
   * SEMANTIC COLORS
   * Hues match claims-app exactly; values adjusted for readability on light.
   * ───────────────────────────────────────────────────────────────────────── */

  /* Success — claims-app: #00E676 (neon). Light: deep green for contrast. */
  --color-success:          #0A8A4B;
  --color-success-hover:    #077A41;
  --color-success-bg:       #E8F7EF;   /* Soft green surface */
  --color-success-border:   #A7DFC0;

  /* Warning — claims-app: #FFB74D */
  --color-warning:          #C57A00;
  --color-warning-hover:    #B06E00;
  --color-warning-bg:       #FEF3E2;
  --color-warning-border:   #F6C97D;

  /* Danger — claims-app: #FF5277 */
  --color-danger:           #D6294E;
  --color-danger-hover:     #BE2244;
  --color-danger-bg:        #FDE8ED;
  --color-danger-border:    #F4A6B6;

  /* Info — maps to claims-app blue accent (#4E9AFF) */
  --color-info:             #1A73E8;
  --color-info-hover:       #1460C9;
  --color-info-bg:          #E8F0FE;
  --color-info-border:      #A8C7FA;

  /* Purple — used for AI / special features in claims-app (#B388FF, #9C27B0) */
  --color-purple:           #7C3AED;
  --color-purple-bg:        #F3EFFE;
  --color-purple-border:    #C4B5FD;

  /* ─────────────────────────────────────────────────────────────────────────
   * BACKGROUNDS & SURFACES
   * Light inversion of claims-app dark layers:
   *   dark bg  #0B0F1A  →  light bg  #F4F6FA
   *   dark card #161D30  →  light card #FFFFFF
   *   dark surface #131829 → light surface-2 #F9FAFC
   * ───────────────────────────────────────────────────────────────────────── */
  --color-bg:               #F4F6FA;   /* Page background (outermost layer) */
  --color-surface:          #FFFFFF;   /* Cards, panels, modals */
  --color-surface-2:        #F9FAFC;   /* Slightly recessed surfaces (table header, sidebar) */
  --color-surface-hover:    #EFF2F7;   /* Row hover, interactive surface hover */

  /* Sidebar gradient — mirrors claims-app sidebar gradient feel in light */
  --color-sidebar-bg:       #FFFFFF;
  --color-sidebar-border:   #E2E8F0;
  --color-sidebar-from:     #FAFBFD;
  --color-sidebar-to:       #F1F4FA;

  /* ─────────────────────────────────────────────────────────────────────────
   * BORDERS
   * ───────────────────────────────────────────────────────────────────────── */
  --color-border:           #E2E8F0;   /* Default border (claims: #1E2540 dark) */
  --color-border-light:     #EEF1F6;   /* Lighter / inner borders */
  --color-border-strong:    #CBD5E1;   /* Emphasis border (active card, focus) */

  /* ─────────────────────────────────────────────────────────────────────────
   * TEXT
   * ───────────────────────────────────────────────────────────────────────── */
  --color-text:             #1A2033;   /* Primary text (claims: #E0E4F0 on dark) */
  --color-text-secondary:   #5A6A80;   /* Muted / meta text (claims: #8B92A5) */
  --color-text-tertiary:    #8FA0B4;   /* Placeholders, disabled text */
  --color-text-inverse:     #FFFFFF;   /* Text on colored backgrounds */

  /* ─────────────────────────────────────────────────────────────────────────
   * TYPOGRAPHY
   * claims-app uses system font stack with no Google Fonts.
   * For Monitor Precios ML we introduce Inter (modern B2B SaaS standard)
   * with the same system fallback chain as claims-app.
   * Include in <head>:
   *   <link rel="preconnect" href="https://fonts.googleapis.com">
   *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   * ───────────────────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;

  /* Type scale — mirrors claims-app density */
  --font-size-xs:    10px;   /* Labels, badges, overlines */
  --font-size-sm:    11px;   /* Secondary meta, table headers */
  --font-size-base:  13px;   /* Table cells, form labels, body copy */
  --font-size-md:    14px;   /* Body default, nav items */
  --font-size-lg:    16px;   /* Section headers, card titles */
  --font-size-xl:    18px;   /* Page headers */
  --font-size-2xl:   22px;   /* Big metric values */
  --font-size-3xl:   26px;   /* Hero numbers */
  --font-size-4xl:   36px;   /* Landing logo */

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Line heights */
  --lh-tight:    1.25;
  --lh-snug:     1.4;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  /* Letter spacing */
  --ls-tight:    -0.5px;
  --ls-normal:    0;
  --ls-wide:      0.3px;
  --ls-wider:     0.5px;
  --ls-widest:    0.8px;

  /* ─────────────────────────────────────────────────────────────────────────
   * SPACING SCALE
   * 4px base unit — same density feel as claims-app.
   * ───────────────────────────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─────────────────────────────────────────────────────────────────────────
   * BORDER RADIUS SCALE
   * claims-app: 6px (sm), 8px (inputs/login), 10px (cards), 12px (modal), 50% (circle)
   * ───────────────────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ─────────────────────────────────────────────────────────────────────────
   * SHADOWS / ELEVATION
   * claims-app: 0 2px 12px rgba(0,0,0,0.4) on dark.
   * Light equivalents use lighter blur & lower opacity.
   * ───────────────────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(26, 32, 51, 0.06);
  --shadow-sm:  0 2px 6px rgba(26, 32, 51, 0.08);
  --shadow-md:  0 4px 12px rgba(26, 32, 51, 0.10);
  --shadow-lg:  0 8px 24px rgba(26, 32, 51, 0.12);
  --shadow-xl:  0 16px 40px rgba(26, 32, 51, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-primary-subtle);

  /* ─────────────────────────────────────────────────────────────────────────
   * TRANSITIONS
   * Same timings as claims-app (0.15s - 0.25s ease).
   * ───────────────────────────────────────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.20s ease;
  --transition-medium: all 0.25s ease;

  /* ─────────────────────────────────────────────────────────────────────────
   * LAYOUT CONSTANTS
   * Sidebar widths mirror claims-app sidebar logic.
   * ───────────────────────────────────────────────────────────────────────── */
  --sidebar-w:          220px;   /* Monitor: always expanded (no collapse needed) */
  --topbar-h:            56px;
  --content-max-w:     1280px;

  /* ─────────────────────────────────────────────────────────────────────────
   * STATUS CHIP COLORS (for precio monitoring states)
   * ───────────────────────────────────────────────────────────────────────── */
  --chip-active-bg:      var(--color-success-bg);
  --chip-active-color:   var(--color-success);
  --chip-active-border:  var(--color-success-border);

  --chip-paused-bg:      var(--color-warning-bg);
  --chip-paused-color:   var(--color-warning);
  --chip-paused-border:  var(--color-warning-border);

  --chip-closed-bg:      #F1F5F9;
  --chip-closed-color:   #64748B;
  --chip-closed-border:  #CBD5E1;

  --chip-alert-bg:       var(--color-danger-bg);
  --chip-alert-color:    var(--color-danger);
  --chip-alert-border:   var(--color-danger-border);
}