/* ==========================================================================
   Bancada — Sistema de diseño
   Dirección: "taller". Papel cálido, tinta profunda, ámbar de sierra.
   Todo en tokens. Ningún color literal fuera de este archivo.
   ========================================================================== */

:root {
  /* ---- Base cálida (papel / tinta) ---------------------------------- */
  --paper:        #FAF7F2;
  --paper-2:      #F3EFE7;
  --paper-3:      #EAE4D9;
  --surface:      #FFFFFF;
  --surface-2:    #FDFBF8;
  --surface-sunk: #F5F1EA;

  --ink:          #1A1713;
  --ink-2:        #4A433A;
  --ink-3:        #7A7167;
  --ink-4:        #A79E92;

  --line:         #E2DBCF;
  --line-2:       #D2C9BA;
  --line-strong:  #B9AE9B;

  /* ---- Ámbar de sierra (acción primaria) ---------------------------- */
  --acc:          #C96A12;
  --acc-hover:    #AC590C;
  --acc-press:    #8F4908;
  --acc-soft:     #FCEFE0;
  --acc-soft-2:   #F7DFC5;
  --acc-line:     #EDC79B;
  --acc-ink:      #7A3D05;
  /* Texto que va ENCIMA del acento. En claro el ámbar es oscuro y pide texto blanco;
     en oscuro el ámbar se aclara y el blanco queda ilegible (2,4:1), así que va tinta. */
  --sobre-acc:    #FFFFFF;

  /* ---- Acero (módulo de herrería / secundario) ---------------------- */
  --steel:        #3C6B96;
  --steel-hover:  #325A80;
  --steel-soft:   #E8F0F7;
  --steel-line:   #B9D0E4;
  --steel-ink:    #234561;
  --sobre-steel:  #FFFFFF;

  /* ---- Semánticos ---------------------------------------------------- */
  --ok:           #2E7D52;
  --ok-soft:      #E4F2EA;
  --ok-line:      #A9D4BD;
  --warn:         #B8790A;
  --warn-soft:    #FBF0D8;
  --warn-line:    #EBCF8E;
  --bad:          #B33A2B;
  --bad-soft:     #FAE9E6;
  --bad-line:     #EBB7AE;

  /* ---- Aprovechamiento (escala de calidad del plano) ----------------- */
  --yield-hi:     #2E7D52;
  --yield-mid:    #B8790A;
  --yield-lo:     #B33A2B;

  /* ---- Plano de corte ------------------------------------------------ */
  --plan-bg:      #FFFFFF;
  --plan-board:   #F6F2EA;
  --plan-edge:    #C6BBA8;
  --plan-piece:   #FFFFFF;
  --plan-piece-line: #8E8271;
  --plan-label:   #4A433A;
  --plan-waste:   #EFE9DE;
  --plan-waste-line: #D5CBB8;
  --plan-kerf:    #D9CDB8;
  --plan-sel:     #C96A12;
  --plan-sel-fill:#FCEFE0;
  --plan-grain:   #DED5C4;

  /* ---- Manijas del 3D (iguales en claro y oscuro: el alfa lo pone el dibujo) ---------------------------------------- */
  --tirador-cuerpo:     #26282C;
  --tirador-inox:       #D6DADF;
  --tirador-inox-filo:  #30343A;
  --tirador-brillo:     #FFFFFF;

  /* ---- Herrajes dibujados en la pantalla Herrajes (metal y plástico) ---- */
  --herraje-metal:      #CBD1D8;
  --herraje-plastico:   #E6DFCF;

  /* ---- Tipografía ---------------------------------------------------- */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --font-num: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;

  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   21px;
  --fs-2xl:  27px;
  --fs-3xl:  34px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  /* ---- Espaciado (base 4) -------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 56px; --s10: 72px;

  /* ---- Radios --------------------------------------------------------- */
  --r-sm:  6px;
  --r:     9px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* ---- Sombras (tintadas en cálido, nunca gris puro) ------------------ */
  --sh-1: 0 1px 2px rgba(58,44,26,.06), 0 1px 1px rgba(58,44,26,.04);
  --sh-2: 0 2px 4px rgba(58,44,26,.07), 0 4px 12px rgba(58,44,26,.06);
  --sh-3: 0 4px 10px rgba(58,44,26,.09), 0 12px 32px rgba(58,44,26,.10);
  --sh-4: 0 8px 20px rgba(58,44,26,.12), 0 28px 64px rgba(58,44,26,.16);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.7);
  --ring: 0 0 0 3px var(--acc-soft-2);
  --ring-steel: 0 0 0 3px var(--steel-soft);
  /* Brillos, bordes de muestra y avisos flotantes: iguales en claro y en oscuro (antes escritos en app.css). */
  --brillo-acc: inset 0 1px 0 rgba(255,255,255,.18);
  --muestra-borde: rgba(0,0,0,.18);
  --muestra-brillo: inset 0 1px 0 rgba(255,255,255,.35);
  --velo: rgba(26, 23, 19, .38);
  --toast-ok: #7BD3A4;
  --toast-bad: #F09C8D;
  --toast-accion: rgba(255,255,255,.14);
  --toast-accion-hover: rgba(255,255,255,.24);

  /* ---- Geometría de la app -------------------------------------------- */
  --titlebar-h: 38px;
  --toolbar-h:  56px;
  --dock-w:     300px;
  --statusbar-h: 30px;

  /* ---- Movimiento ------------------------------------------------------ */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 110ms;
  --t:      180ms;
  --t-slow: 320ms;
}

/* ==========================================================================
   Tema oscuro — taller de noche. Mismos tokens, otra materia.
   ========================================================================== */
:root[data-theme="dark"] {
  --paper:        #16140F;
  --paper-2:      #1D1A15;
  --paper-3:      #26221B;
  --surface:      #1F1C16;
  --surface-2:    #241F19;
  --surface-sunk: #14120E;

  --ink:          #F5F0E6;
  --ink-2:        #CFC6B6;
  --ink-3:        #9C9384;
  --ink-4:        #6E6659;

  --line:         #332E26;
  --line-2:       #423B31;
  --line-strong:  #574E41;

  --acc:          #E8933C;
  --acc-hover:    #F2A552;
  --acc-press:    #D07C27;
  --acc-soft:     #2E2216;
  --acc-soft-2:   #3D2C1B;
  --acc-line:     #5A412666;
  --acc-ink:      #F2C08A;
  --sobre-acc:    #1A1713;   /* 7,4:1 sobre el ámbar claro */

  --steel:        #6FA3CE;
  --steel-hover:  #85B4DA;
  --steel-soft:   #1B2733;
  --steel-line:   #2E4358;
  --steel-ink:    #A8CBE6;
  --sobre-steel:  #14120E;   /* 6,9:1 sobre el acero claro */

  --ok:           #55B183;  --ok-soft: #14251C;  --ok-line: #24503A;
  --warn:         #DDA53A;  --warn-soft: #29210F; --warn-line: #524019;
  --bad:          #E0705E;  --bad-soft: #2B1815; --bad-line: #55302A;

  --yield-hi: #55B183; --yield-mid: #DDA53A; --yield-lo: #E0705E;

  --plan-bg:      #1B1813;
  --plan-board:   #221E18;
  --plan-edge:    #4A4237;
  --plan-piece:   #2A251E;
  --plan-piece-line: #6E6558;
  --plan-label:   #D3CABA;
  --plan-waste:   #1E1B15;
  --plan-waste-line: #3A342B;
  --plan-kerf:    #3E3830;
  --plan-sel:     #E8933C;
  --plan-sel-fill:#33241400;
  --plan-grain:   #332E26;

  /* ---- Manijas del 3D (los mismos que en claro) ---------------------------------------- */
  --tirador-cuerpo:     #26282C;
  --tirador-inox:       #D6DADF;
  --tirador-inox-filo:  #30343A;
  --tirador-brillo:     #FFFFFF;

  /* ---- Herrajes dibujados en la pantalla Herrajes ---- */
  --herraje-metal:      #5B626B;
  --herraje-plastico:   #6A634F;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.35);
  --sh-3: 0 6px 16px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
  --sh-4: 0 10px 28px rgba(0,0,0,.55), 0 32px 72px rgba(0,0,0,.55);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.04);
  --ring: 0 0 0 3px #4A331C;
  --ring-steel: 0 0 0 3px #24374A;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}