/* =====================================================================
   Ferretería Duque — Design Tokens
   Espejo de theme.json para uso en CSS plano (utilities, bloques custom).
   ===================================================================== */

:root {
  /* ---------- Brand ---------- */
  --fdq-primary: #041632;
  --fdq-primary-container: #1B2B48;
  --fdq-primary-fixed: #d7e2ff;
  --fdq-primary-fixed-dim: #b7c7eb;
  --fdq-on-primary: #ffffff;
  --fdq-on-primary-container: #b0c4de;
  --fdq-on-primary-fixed: #091b37;
  --fdq-on-primary-fixed-variant: #374765;

  --fdq-secondary: #0077a6;
  --fdq-secondary-container: #1FC0FF;
  --fdq-secondary-fixed: #beeaff;
  --fdq-secondary-fixed-dim: #5ed4ff;
  --fdq-on-secondary: #003544;
  --fdq-on-secondary-container: #003544;
  --fdq-on-secondary-fixed: #001f28;
  --fdq-on-secondary-fixed-variant: #004e60;

  --fdq-tertiary: #0c1728;
  --fdq-tertiary-container: #212c3d;
  --fdq-tertiary-fixed: #d8e3fa;
  --fdq-tertiary-fixed-dim: #bcc7dd;
  --fdq-on-tertiary: #ffffff;
  --fdq-on-tertiary-container: #8893a8;
  --fdq-on-tertiary-fixed: #111c2c;
  --fdq-on-tertiary-fixed-variant: #3c475a;

  --fdq-accent: #0077b5;

  /* Literales del diseño (slate) */
  --fdq-slate-100: #f1f5f9;
  --fdq-slate-200: #e2e8f0;
  --fdq-slate-600: #475569;

  --fdq-error: #ba1a1a;
  --fdq-error-container: #ffdad6;
  --fdq-on-error: #ffffff;
  --fdq-on-error-container: #93000a;

  --fdq-success: #1f7a3d;
  --fdq-success-container: #d4f4dc;
  --fdq-on-success: #ffffff;
  --fdq-on-success-container: #0b5023;

  --fdq-warning: #b25e00;
  --fdq-warning-container: #ffe2c4;
  --fdq-on-warning: #ffffff;
  --fdq-on-warning-container: #5e3200;

  /* ---------- Surfaces ---------- */
  --fdq-background: #f7fafc;
  --fdq-on-background: #181c1e;
  --fdq-surface: #f7fafc;
  --fdq-surface-bright: #f7fafc;
  --fdq-surface-dim: #d7dadc;
  --fdq-surface-variant: #e0e3e5;
  --fdq-surface-container-lowest: #ffffff;
  --fdq-surface-container-low: #f1f4f6;
  --fdq-surface-container: #ebeef0;
  --fdq-surface-container-high: #e5e9eb;
  --fdq-surface-container-highest: #e0e3e5;
  --fdq-on-surface: #181c1e;
  --fdq-on-surface-variant: #44474d;
  --fdq-outline: #75777e;
  --fdq-outline-variant: #c5c6ce;
  --fdq-inverse-surface: #2d3133;
  --fdq-inverse-on-surface: #eef1f3;
  --fdq-inverse-primary: #b7c7eb;
  --fdq-surface-tint: #4f5e7e;

  /* ---------- Typography ---------- */
  --fdq-font-heading: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fdq-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fdq-fs-label: 12px;
  --fdq-fs-body-md: 16px;
  --fdq-fs-body-lg: 18px;
  --fdq-fs-h3: 24px;
  --fdq-fs-h2: 32px;
  --fdq-fs-h1: 40px;

  --fdq-lh-tight: 1.2;
  --fdq-lh-snug: 1.3;
  --fdq-lh-relaxed: 1.4;
  --fdq-lh-base: 1.5;
  --fdq-lh-body: 1.6;

  --fdq-tracking-tight-2: -0.02em;
  --fdq-tracking-tight-1: -0.01em;
  --fdq-tracking-caps: 0.05em;

  /* ---------- Spacing ---------- */
  --fdq-space-base: 4px;
  --fdq-space-xs: 8px;
  --fdq-space-sm: 16px;
  --fdq-space-gutter: 20px;
  --fdq-space-md: 24px;
  --fdq-space-lg: 40px;
  --fdq-space-xl: 64px;
  --fdq-container-max: 1280px;
  --fdq-content-max: 768px;
  --fdq-header-h: 128px;

  /* ---------- Radii ---------- */
  --fdq-radius-sm: 0.125rem; /* 2px  - default */
  --fdq-radius-md: 0.25rem;  /* 4px  - lg */
  --fdq-radius-lg: 0.5rem;   /* 8px  - xl */
  --fdq-radius-xl: 0.75rem;  /* 12px - full (semantic) */
  --fdq-radius-pill: 9999px;

  /* ---------- Elevation (tinted, sin negro puro) ---------- */
  --fdq-shadow-sm: 0 1px 2px rgba(4, 22, 50, 0.06);
  --fdq-shadow-md: 0 4px 12px rgba(4, 22, 50, 0.08);
  --fdq-shadow-lg: 0 12px 40px rgba(4, 22, 50, 0.10);

  /* ---------- Gradiente firma ---------- */
  --fdq-gradient-sheen: linear-gradient(135deg, var(--fdq-primary) 0%, var(--fdq-primary-container) 100%);

  /* ---------- Focus ---------- */
  --fdq-focus-ring: 3px solid var(--fdq-secondary-container);
  --fdq-focus-offset: 2px;

  /* ---------- Motion ---------- */
  --fdq-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fdq-duration-fast: 120ms;
  --fdq-duration-base: 200ms;
}

/* ---------------------------------------------------------------------
   Móvil (< 576px): tipografías de título y espaciados más compactos.
   Al sobrescribir los tokens, escala automáticamente todo lo que los usa
   (títulos por defecto h1/h2/h3, gaps y padding-inline de secciones, etc.).
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  :root {
    --fdq-fs-h1: 28px;
    --fdq-fs-h2: 24px;
    --fdq-fs-h3: 20px;
    --fdq-fs-body-lg: 16px;

    --fdq-space-md: 16px;
    --fdq-space-lg: 28px;
    --fdq-space-xl: 40px;
  }
}