/* =============================================================
   Transmodal Design System — colors_and_type.css
   Source of truth: DESIGN.md (sections 2 and 3).
   Fonts: DM Sans, bound from local files in fonts/.
   ============================================================= */

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand scale ---------- */
  --brand-navy-900: #0E2444;
  --brand-navy-800: #142E55;
  --brand-navy-700: #1C3D6E;
  --brand-blue-600: #2580BC;  /* canonical wordmark color */
  --brand-blue-500: #3A9BD8;
  --brand-blue-300: #8FC6E6;
  --brand-cyan-400: #6FD8EF;
  --brand-lime-500: #B6FF3D;  /* tagline accent — "Protege lo tuyo" */
  --brand-lime-700: #5AA22A;

  /* ---------- Semantic neutrals (light) ---------- */
  --bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --fg: #0E2444;
  --muted: #5C6B82;
  --border: #DCE3EC;
  --border-strong: #B7C3D3;

  /* ---------- State ---------- */
  --accent: var(--brand-lime-500);
  --accent-ink: #0E2444;       /* readable ink color on top of lime */
  --success: var(--brand-lime-700);
  --warning: #E08A1F;
  --danger:  #D8453B;
  --info:    var(--brand-blue-600);

  /* ---------- Type ---------- */
  --font-sans: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-display: 4.5rem;
  --type-h1:      3rem;
  --type-h2:      2.25rem;
  --type-h3:      1.5rem;
  --type-h4:      1.125rem;
  --type-body:    1rem;
  --type-body-sm: 0.875rem;
  --type-caption: 0.75rem;
  --type-mono:    0.875rem;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.55;

  --tracking-tight: -0.02em;
  --tracking-flat:   0;
  --tracking-caption: 0.04em;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

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

  /* ---------- Shadow ---------- */
  --shadow-1: 0 1px 2px rgba(14, 36, 68, 0.06);
  --shadow-2: 0 4px 12px rgba(14, 36, 68, 0.08);
  --shadow-3: 0 12px 32px rgba(14, 36, 68, 0.14);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-modal:  240ms;
  --dur-hero:   320ms;
}

[data-theme="dark"] {
  --bg: var(--brand-navy-900);
  --surface: var(--brand-navy-800);
  --surface-2: var(--brand-navy-700);
  --fg: #F6F8FB;
  --muted: #9FB2CC;
  --border: #23436E;
  --border-strong: #3A5C8C;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ---------- Base typography helpers (utility-light, opt-in) ---------- */

html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tx-display { font-size: var(--type-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.tx-h1      { font-size: var(--type-h1);      font-weight: 700; line-height: 1.08; letter-spacing: var(--tracking-tight); }
.tx-h2      { font-size: var(--type-h2);      font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.tx-h3      { font-size: var(--type-h3);      font-weight: 500; line-height: var(--leading-snug); }
.tx-h4      { font-size: var(--type-h4);      font-weight: 500; line-height: 1.3; }
.tx-body    { font-size: var(--type-body);    font-weight: 400; line-height: var(--leading-normal); }
.tx-body-sm { font-size: var(--type-body-sm); font-weight: 400; line-height: 1.5; }
.tx-caption {
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--muted);
}
.tx-mono    { font-family: var(--font-mono); font-size: var(--type-mono); font-variant-numeric: tabular-nums; }

.tx-num { font-variant-numeric: tabular-nums; }

/* ---------- Primitive components used across previews + ui_kit ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  font-weight: 600;
  letter-spacing: 0;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.btn:focus-visible { outline: 2px solid var(--brand-blue-500); outline-offset: 2px; }

.btn-primary   { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 92%, black); }
.btn-secondary { background: var(--brand-navy-900); color: #fff; }
.btn-secondary:hover { background: var(--brand-navy-800); }
.btn-ghost     { background: transparent; color: var(--brand-blue-600); border-color: var(--brand-blue-600); }
.btn-ghost:hover { background: color-mix(in oklab, var(--brand-blue-600) 8%, transparent); }
.btn-danger    { background: var(--danger); color: #fff; }
.btn:disabled  { opacity: .4; pointer-events: none; }

.input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  font: 400 var(--type-body)/1.4 var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.input:focus { outline: 2px solid var(--brand-blue-500); outline-offset: 2px; border-color: var(--brand-blue-500); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}
.pill-success { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--success); }
.pill-warning { background: color-mix(in oklab, var(--warning) 18%, transparent); color: var(--warning); }
.pill-danger  { background: color-mix(in oklab, var(--danger) 18%, transparent);  color: var(--danger); }
.pill-info    { background: color-mix(in oklab, var(--info) 14%, transparent);    color: var(--info); }