/* ============================================================================
 * trabajarconia — design tokens
 * T28. Derived from Brandbook_trabajarconai_v1.pptx, verified for contrast.
 *
 * Rule from the board: no loose hex values in components. If a component needs
 * a color that is not here, the token set is wrong — fix it here, not there.
 * ========================================================================= */

:root {
  /* --- Brand primitives -------------------------------------------------
   * The six colors named in the brandbook. Exact values, unchanged.
   * These are RAW. Do not use them directly in components — use the semantic
   * tokens below, which encode where each color is legible.
   */
  --brand-navy:       #081B4B;
  --brand-blue:       #1EA7FF;
  --brand-deep-blue:  #0B3DFF;
  --brand-purple:     #8B5CFF;
  --brand-white:      #FFFFFF;
  --brand-gray:       #6B7280;

  /* --- Brand gradient ---------------------------------------------------
   * Brandbook says "azul -> violeta" without stops. These were sampled from
   * the logo artwork: the mark runs hue 206 -> 258.
   */
  --gradient-brand:      linear-gradient(135deg, #1EA7FF 0%, #0B3DFF 48%, #8B5CFF 100%);
  --gradient-brand-flat: linear-gradient(90deg, #1EA7FF 0%, #8B5CFF 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(30,167,255,.12) 0%, rgba(139,92,255,.12) 100%);

  /* --- Neutral ramp -----------------------------------------------------
   * Anchored on the brandbook Gray at 500; the rest derived in the same hue.
   */
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #6B7280;  /* brandbook Gray */
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;

  /* --- Navy tint ramp ---------------------------------------------------
   * For dark surfaces. Secondary text on Navy is tinted from the surface hue,
   * never neutral gray — gray on Navy is 3.42:1 and reads dirty.
   */
  --navy-900: #050F2B;
  --navy-800: #081B4B;  /* brandbook Navy */
  --navy-700: #0E2A63;
  --navy-600: #16397C;
  --navy-300: #8FA1BE;
  --navy-200: #A9B8D0;
  --navy-100: #C7D2E4;

  /* --- Status -----------------------------------------------------------
   * Not in the brandbook. Derived, and verified against both surfaces.
   * Each role has a light-surface value and a dark-surface value.
   */
  --status-success:      #047857;  /* 5.48:1 on white */
  --status-success-dark: #34D399;  /* 8.61:1 on navy  */
  --status-success-bg:   #ECFDF5;
  --status-warning:      #B54708;  /* 5.43:1 on white */
  --status-warning-dark: #FBBF24;  /* 9.92:1 on navy  */
  --status-warning-bg:   #FFFBEB;
  --status-danger:       #B42318;  /* 6.57:1 on white */
  --status-danger-dark:  #FCA5A5;  /* 8.72:1 on navy  */
  --status-danger-bg:    #FEF2F2;

  /* --- Chart marks -------------------------------------------------------
   * Before/after encoding, validated with the dataviz palette checker on the
   * light surface: chroma floor PASS, CVD separation PASS (protan ΔE 12.2,
   * tritan 7.8), contrast PASS. Tritan sits in the 6–8 band, which is legal
   * only with secondary encoding — the dumbbell form direct-labels both
   * endpoints, so that relief is structural rather than optional.
   *
   * Do NOT substitute Purple #8B5CFF for --chart-before: against Deep Blue it
   * measures ΔE 5.8 under protanopia. The brand's two accents are the one pair
   * that cannot be used together to carry meaning.
   */
  --chart-before: #5B7FD9;
  --chart-after:  var(--brand-deep-blue);
  --chart-grid:   var(--neutral-200);
  --chart-axis:   var(--neutral-300);

  /* --- Semantic: light surfaces (the default) ---------------------------
   * NOTE: --brand-blue is absent by design. At 2.62:1 on white it fails body
   * text, fails white-on-blue fills, and fails the 3:1 floor for borders and
   * focus rings. On light surfaces the accent is Deep Blue.
   */
  --surface:            #FFFFFF;
  --surface-raised:     #FFFFFF;
  --surface-sunken:     var(--neutral-50);
  --surface-muted:      var(--neutral-100);

  --text-primary:       var(--brand-navy);   /* 16.55:1 */
  --text-secondary:     var(--neutral-600);  /*  7.58:1 */
  --text-tertiary:      var(--brand-gray);   /*  4.83:1 — AA floor, not below */
  --text-on-accent:     #FFFFFF;
  --text-link:          var(--brand-deep-blue);

  --border:             var(--neutral-200);
  --border-strong:      var(--neutral-300);

  --accent:             var(--brand-deep-blue); /* 6.72:1 — safe on white */
  --accent-hover:       #0A34DB;
  --accent-active:      #082BB8;
  --accent-subtle-bg:   #EEF2FF;

  /* --- Semantic: dark surfaces (Navy) -----------------------------------
   * Apply with [data-surface="navy"]. Blue comes alive here: 6.33:1.
   */
  --on-navy-text:       #FFFFFF;
  --on-navy-secondary:  var(--navy-100);  /* 10.85:1 */
  --on-navy-tertiary:   var(--navy-300);  /*  6.31:1 */
  --on-navy-border:     var(--navy-600);
  --on-navy-accent:     var(--brand-blue);/*  6.33:1 */

  /* --- Typography -------------------------------------------------------
   * Manrope, self-hosted variable (see brand/fonts/manrope/).
   * Its default instance is 200 — always set a weight explicitly.
   */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Manrope runs wide; display sizes need negative tracking. Floor is -0.04em. */
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  --measure: 68ch;  /* body line length */

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

  /* --- Radius — brandbook: rounded corners, rounded buttons -------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  --radius-button: var(--radius-full);
  --radius-card:   var(--radius-xl);
  --radius-input:  var(--radius-md);

  /* --- Elevation --------------------------------------------------------
   * Navy-tinted rather than black: a neutral-black shadow over a blue-leaning
   * palette reads muddy. Every level carries an offset and a blur.
   */
  --shadow-sm: 0 1px 2px rgba(8, 27, 75, .06), 0 1px 3px rgba(8, 27, 75, .10);
  --shadow-md: 0 2px 4px rgba(8, 27, 75, .06), 0 4px 12px rgba(8, 27, 75, .10);
  --shadow-lg: 0 4px 8px rgba(8, 27, 75, .06), 0 12px 28px rgba(8, 27, 75, .14);
  --shadow-xl: 0 8px 16px rgba(8, 27, 75, .08), 0 24px 56px rgba(8, 27, 75, .18);

  /* --- Motion -----------------------------------------------------------
   * Exponential ease-out from an already-visible default.
   */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 120ms;
  --duration-fast:    180ms;
  --duration-normal:  240ms;
  --duration-slow:    320ms;

  /* --- Focus ------------------------------------------------------------
   * Deep Blue at 6.72:1 clears the 3:1 non-text floor with room to spare.
   */
  --focus-ring:        0 0 0 3px rgba(11, 61, 255, .35);
  --focus-ring-navy:   0 0 0 3px rgba(30, 167, 255, .45);
  --focus-ring-offset: 2px;

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1200px;
  --content-max:   720px;
  --header-height: 64px;
}

/* ============================================================================
 * Browser surfaces — the parts nobody draws still carry the design.
 * ========================================================================= */

::selection {
  background: rgba(11, 61, 255, .16);
  color: var(--brand-navy);
}

:root {
  accent-color: var(--accent);        /* checkboxes, radios, range */
  caret-color:  var(--accent);
  color-scheme: light;
  scrollbar-color: var(--neutral-300) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--neutral-400); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--focus-ring-offset);
}

/* Numbers in tables and metrics must not jitter between rows. */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================================
 * Base
 * ========================================================================= */

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);  /* required — Manrope defaults to 200 */
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dark surface scope. Sets the whole semantic layer, so components inside
 * need no awareness of which surface they are on. */
[data-surface="navy"] {
  --surface:        var(--brand-navy);
  --surface-raised: var(--navy-700);
  --surface-sunken: var(--navy-900);
  --surface-muted:  var(--navy-700);
  --text-primary:   var(--on-navy-text);
  --text-secondary: var(--on-navy-secondary);
  --text-tertiary:  var(--on-navy-tertiary);
  --border:         var(--on-navy-border);
  --border-strong:  var(--navy-300);
  --accent:         var(--on-navy-accent);
  --text-link:      var(--on-navy-accent);
  --focus-ring:     var(--focus-ring-navy);
  --status-success: var(--status-success-dark);
  --status-warning: var(--status-warning-dark);
  --status-danger:  var(--status-danger-dark);
  color: var(--text-primary);
  background: var(--surface);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}