/* ============================================================
   Cocinas 3D — Design Tokens
   Showroom blanco y limpio, estilo mueble nórdico.
   Import this first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Newsreader:ital,wght@1,300;1,400;1,500&display=swap');

:root {
  /* ---------- color · neutrals (blanco + gris cálido) ---------- */
  --obsidian:    #F6F6F4;   /* page background */
  --carbon:      #FFFFFF;   /* panel / card resting */
  --graphite:    #F1F1EE;   /* card hover, raised surface */
  --steel:       #E7E7E3;   /* highest neutral elevation */
  --steel-edge:  #DEDEDA;   /* 1px hairline borders */
  --steel-mid:   #ABABA4;   /* dividers, inactive icon strokes */
  --chrome:      #63645F;   /* secondary text, mid-tone */
  --bone:        #1C1C1A;   /* primary text */
  --bone-pure:   #000000;   /* highlights only — never as bg */

  /* ---------- color · signature accents ---------- */
  --neon:        #0058A3;   /* accent azul, estilo showroom nórdico */
  --neon-soft:   rgba(0, 88, 163, 0.08);
  --neon-edge:   rgba(0, 88, 163, 0.3);
  --neon-deep:   #00417a;   /* shadowed/pressed accent */

  --flare:       #C4291C;   /* alerts / destructive only */
  --flare-soft:  rgba(196, 41, 28, 0.08);

  --copper:      #C97B47;   /* warm secondary — used VERY rarely */

  /* ---------- color · semantic ---------- */
  --bg:          var(--obsidian);
  --bg-panel:    var(--carbon);
  --bg-raised:   var(--graphite);

  --fg1:         var(--bone);          /* primary text */
  --fg2:         var(--chrome);        /* secondary text */
  --fg3:         var(--steel-mid);     /* tertiary / disabled */
  --fg-on-neon:  #FFFFFF;              /* text on accent fills */

  --border:      var(--steel-edge);
  --border-strong: var(--steel-mid);

  --accent:      var(--neon);
  --accent-fg:   #FFFFFF;
  --danger:      var(--flare);
  --success:     #1E7A3D;
  --warn:        var(--copper);

  /* ---------- spacing (4px base) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- radius ---------- */
  --r-chip:   2px;
  --r-input:  4px;
  --r-card:   8px;
  --r-app:   14px;
  --r-pill:  999px;

  /* ---------- borders ---------- */
  --bw:       1px;
  --bw-2:     2px;

  /* ---------- elevation (we use bg-color shifts, not shadows) ---------- */
  --elev-0:  var(--obsidian);
  --elev-1:  var(--carbon);
  --elev-2:  var(--graphite);
  --elev-3:  var(--steel);

  /* ---------- shadows (used sparingly) ---------- */
  --shadow-glow:   0 0 0 1px var(--neon-edge), 0 0 24px -4px rgba(184,255,61,0.35);
  --shadow-card:   0 1px 0 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--steel-edge);
  --shadow-modal:  0 24px 80px -16px rgba(0,0,0,0.8), 0 0 0 1px var(--steel-edge);

  /* ---------- type · families ---------- */
  --font-display: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-italic:  'Newsreader', ui-serif, Georgia, serif;

  /* ---------- type · scale ---------- */
  --t-mono-xs: 600 10px/1.2 var(--font-mono);   /* tags, status chips, metadata */
  --t-mono-sm: 500 12px/1.4 var(--font-mono);   /* labels, captions */
  --t-mono-md: 500 14px/1.5 var(--font-mono);   /* code, dense data */

  --t-body-sm: 500 13px/1.5 var(--font-body);
  --t-body:    500 15px/1.55 var(--font-body);
  --t-body-lg: 500 17px/1.5 var(--font-body);

  --t-h6: 600 16px/1.3 var(--font-display);
  --t-h5: 700 20px/1.25 var(--font-display);
  --t-h4: 700 26px/1.2  var(--font-display);
  --t-h3: 800 36px/1.1  var(--font-display);
  --t-h2: 800 56px/1.05 var(--font-display);
  --t-h1: 800 88px/1.0  var(--font-display);

  --t-display: 800 128px/0.95 var(--font-display);

  --t-quote: italic 400 24px/1.4 var(--font-italic);

  /* ---------- letter spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;   /* uppercase mono labels */

  /* ---------- motion ---------- */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --t-fast:      120ms;
  --t-base:      200ms;
  --t-slow:      320ms;
  --t-page:      500ms;

  /* ---------- grids / textures ---------- */
  --grid-line:   rgba(255,255,255,0.025);
  --grid-line-2: rgba(255,255,255,0.05);
}

/* ============================================================
   Base reset + page defaults (standard)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg1);
  font: var(--t-body);
  letter-spacing: var(--tracking-snug);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic helpers — apply directly OR copy values
   ============================================================ */
.k-h1 { font: var(--t-h1); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.k-h2 { font: var(--t-h2); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.k-h3 { font: var(--t-h3); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.k-h4 { font: var(--t-h4); letter-spacing: var(--tracking-snug);  color: var(--fg1); }
.k-h5 { font: var(--t-h5); letter-spacing: var(--tracking-snug);  color: var(--fg1); }
.k-h6 { font: var(--t-h6); letter-spacing: var(--tracking-snug);  color: var(--fg1); }
.k-body  { font: var(--t-body);     color: var(--fg1); }
.k-body-sm { font: var(--t-body-sm); color: var(--fg2); }

.k-mono       { font: var(--t-mono-md); color: var(--fg1); }
.k-mono-sm    { font: var(--t-mono-sm); color: var(--fg2); }
.k-label      { font: var(--t-mono-xs); color: var(--fg2); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.k-quote      { font: var(--t-quote);   color: var(--fg1); font-family: var(--font-italic); }

.k-accent { color: var(--neon); }
.k-muted  { color: var(--fg2); }
.k-dim    { color: var(--fg3); }

/* ============================================================
   Surfaces
   ============================================================ */
.k-card {
  background: var(--bg-panel);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-card);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.k-card:hover { background: var(--bg-raised); border-color: var(--border-strong); }

/* steel grid texture — overlay this on any panel */
.k-grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* tighter 8px grid for technical surfaces */
.k-grid-fine {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* ============================================================
   Pills / chips
   ============================================================ */
.k-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 8px;
  border: var(--bw) solid var(--border);
  border-radius: var(--r-chip);
  font: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg2);
}
.k-chip--accent { color: var(--neon); border-color: var(--neon-edge); background: var(--neon-soft); }
.k-chip--danger { color: var(--flare); border-color: rgba(255,68,56,0.35); background: var(--flare-soft); }

/* ============================================================
   Buttons
   ============================================================ */
.k-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 12px 20px;
  border: var(--bw) solid var(--border);
  border-radius: var(--r-input);
  background: transparent;
  color: var(--fg1);
  font: var(--t-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.k-btn:hover { background: var(--graphite); border-color: var(--border-strong); }
.k-btn:active { transform: scale(0.98); }

.k-btn--primary {
  background: var(--neon); color: var(--accent-fg); border-color: var(--neon);
}
.k-btn--primary:hover { background: var(--neon-deep); border-color: var(--neon-deep); }

/* ============================================================
   Mono "scan" animation — used for loaders
   ============================================================ */
@keyframes k-scan {
  0%   { background-position: 0   0; }
  100% { background-position: 24px 0; }
}
.k-scan {
  background-image: repeating-linear-gradient(
    90deg,
    var(--neon) 0 2px,
    transparent 2px 12px
  );
  animation: k-scan 1.2s linear infinite;
}