/* style-base.css — VALIDEAS Design Tokens (Mockup v.4)
 * Carga antes que style-public.css y style-panel.css.
 * Sistema editorial: franjas naranjas + tarjetas cream + bordes negros gruesos.
 */

:root {
  /* ── Colores primarios ─────────────────────────────────────── */
  --orange-500: #FF6B00;     /* bandas, CTAs, chips activos */
  --orange-600: #E55A00;     /* hover */
  --orange-700: #C44A00;     /* pressed */
  --orange-100: #FFE2CC;     /* fondos sutiles */
  --orange-050: #FFF1E5;     /* backgrounds muy suaves */

  --cream:      #FFF8E7;     /* tarjetas */
  --cream-2:    #FAF6EC;     /* background body */
  --paper:      #FFFFFF;     /* inputs */

  --ink:        #111111;     /* texto + bordes 2px */
  --ink-muted:  #4A4A4A;     /* texto secundario */
  --ink-soft:   #767676;     /* captions */
  --ink-line:   #D9D2C0;     /* líneas suaves sobre cream */

  --white:      #FFFFFF;
  --black:      #000000;

  /* ── Fases (mockup p.3) ─────────────────────────────────────── */
  --phase-registro: #FF6B00;
  --phase-pre:      #B6E2A1;
  --phase-examen:   #FFD86B;
  --phase-banco:    #4FA3D1;

  /* ── Estados (mockup p.3) ───────────────────────────────────── */
  --status-acta-pre:    #F59E0B;
  --status-acta-examen: #EAB308;
  --status-validada:    #16A34A;
  --status-desarrollar: #2563EB;

  /* ── Tipografía ─────────────────────────────────────────────── */
  --font-display: 'Archivo Black', 'Impact', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-xxs: 0.6875rem;   /* 11 */
  --fs-xs:  0.75rem;     /* 12 */
  --fs-sm:  0.875rem;    /* 14 */
  --fs-md:  1rem;        /* 16 */
  --fs-lg:  1.125rem;    /* 18 */
  --fs-xl:  1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;     /* 28 */
  --fs-3xl: 2.25rem;     /* 36 */
  --fs-4xl: 3rem;        /* 48 */
  --fs-5xl: 3.75rem;     /* 60 */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ── Spacing (8px base) ─────────────────────────────────────── */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --sp-24: 6rem;     /* 96 */

  /* ── Border radius ─────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ── Shadows (estilo mockup: borde duro + offset) ─────────── */
  --shadow-flat: 4px 4px 0 var(--ink);
  --shadow-flat-sm: 2px 2px 0 var(--ink);
  --shadow-card:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-hover: 6px 6px 0 var(--ink);

  /* ── Transitions ───────────────────────────────────────────── */
  --tx-fast:  120ms cubic-bezier(0.16, 1, 0.3, 1);
  --tx-mid:   220ms cubic-bezier(0.16, 1, 0.3, 1);
  --tx-slow:  400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ────────────────────────────────────────────────── */
  --max-w: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --nav-h: 68px;
}

/* ── Reset ligero ────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tx-fast);
}
a:hover { color: var(--orange-500); }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* ── Container util ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Helpers ────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-orange  { color: var(--orange-500); }
.text-ink     { color: var(--ink); }
.text-muted   { color: var(--ink-muted); }
.bg-orange    { background: var(--orange-500); }
.bg-cream     { background: var(--cream); }

/* ── Focus ring (accesibilidad) ──────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: 4px;
}