/* ============================================================================
   DeCA — Pretium Gestión · Design Tokens (canonical values)
   These values are the single source of truth. SPEC/design-tokens.md mirrors them.
   All strings in the UI are translatable (es base; ca/eu/gl/en). No emojis.
   ============================================================================ */

:root {
  /* ---- Color · neutrals (cool-neutral, low saturation) ---- */
  --color-bg:            #f4f6f8;  /* app background */
  --color-surface:       #ffffff;  /* cards, panels, table */
  --color-surface-2:     #eef2f5;  /* subtle fills, headers, hover rows */
  --color-surface-3:     #e3e9ee;  /* pressed / active fills */
  --color-border:        #dbe3e9;  /* default 1px borders */
  --color-border-strong: #c3cfd8;  /* inputs, dividers needing weight */

  /* ---- Color · text (AA on surfaces) ---- */
  --color-text:          #15242c;  /* primary text  (15.8:1 on #fff) */
  --color-text-muted:    #56666f;  /* secondary     (5.6:1  on #fff) */
  --color-text-subtle:   #7c8b93;  /* tertiary/hints(3.6:1  large only) */
  --color-text-invert:   #ffffff;

  /* ---- Color · brand ---- */
  --color-primary-700:   #143a52;
  --color-primary-600:   #1d4e6f;  /* PRIMARY */
  --color-primary-500:   #266286;
  --color-primary-100:   #e3edf3;  /* tinted surface */
  --color-primary-050:   #f0f5f8;

  --color-accent-700:    #0c7b6c;
  --color-accent-600:    #0f9d8a;  /* ACCENT — primary CTA (emit, save) */
  --color-accent-100:    #dff3f0;
  --color-on-accent:     #ffffff;

  /* ---- Color · semantic feedback ---- */
  --color-success:       #1f8a5b;  --color-success-bg: #e6f4ec;
  --color-warning:       #b06f0a;  --color-warning-bg: #fbf1dc;
  --color-danger:        #c0392b;  --color-danger-bg:  #fbe9e7;
  --color-info:          #1d4e6f;  --color-info-bg:    #e3edf3;

  --color-focus-ring:    #2a86c2;  /* 3px outline, AA against surfaces */

  /* ---- Color · document states (solid badge bg, white text, all AA) ---- */
  --state-borrador:    #64748b;  --state-borrador-bg:    #eef1f4;  --state-borrador-fg:    #475569;
  --state-emitido:     #1f8a5b;  --state-emitido-bg:     #e6f4ec;  --state-emitido-fg:     #156c47;
  --state-modificado:  #b06f0a;  --state-modificado-bg:  #fbf1dc;  --state-modificado-fg:  #8a560a;
  --state-anulado:     #c0392b;  --state-anulado-bg:     #fbe9e7;  --state-anulado-fg:     #98271b;
  --state-sustituido:  #6b4f9e;  --state-sustituido-bg:  #efeaf7;  --state-sustituido-fg:  #533c7c;
  --state-expirado:    #78838c;  --state-expirado-bg:    #eceff1;  --state-expirado-fg:    #5a656d;

  /* ---- Typography ---- */
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Consolas", monospace;

  --fs-display: 28px;  --lh-display: 34px;  --fw-display: 600;
  --fs-h1:      22px;  --lh-h1:      28px;  --fw-h1:      600;
  --fs-h2:      18px;  --lh-h2:      24px;  --fw-h2:      600;
  --fs-h3:      16px;  --lh-h3:      22px;  --fw-h3:      600;
  --fs-body:    14px;  --lh-body:    20px;  --fw-body:    400;
  --fs-body-lg: 16px;  --lh-body-lg: 24px;
  --fs-label:   13px;  --lh-label:   18px;  --fw-label:   500;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-mono:    13px;  --lh-mono:    18px;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;

  /* ---- Radius ---- */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;  --r-xl: 12px;  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw-1: 1px;  --bw-2: 2px;

  /* ---- Shadows (blue-gray, low opacity) ---- */
  --sh-sm: 0 1px 2px rgba(21,36,44,.06), 0 1px 1px rgba(21,36,44,.04);
  --sh-md: 0 2px 6px rgba(21,36,44,.08), 0 1px 2px rgba(21,36,44,.06);
  --sh-lg: 0 8px 24px rgba(21,36,44,.12), 0 2px 6px rgba(21,36,44,.08);
  --sh-focus: 0 0 0 3px rgba(42,134,194,.40);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,0,0,1);
  --dur-fast: 120ms;  --dur-base: 180ms;  --dur-slow: 240ms;

  /* ---- z-index ---- */
  --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100;
  --z-backdrop: 1200; --z-modal: 1300; --z-toast: 1400;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1280px;
  --bp-mobile: 480px;  --bp-tablet: 768px;  --bp-desktop: 1024px;  --bp-wide: 1280px;
}