/* =====================================================================
   Maître — Design Tokens
   Modernist industrial · Brooklyn bistro 2026 · AI voz al teléfono
   Fuente: Claude Imagine (23 abril 2026)
   ===================================================================== */

/* ---- Fonts (Google Fonts) ------------------------------------------
   NOTA: se cargan desde base.html via <link> para aprovechar preconnect.
   Si quieres cargarlas también desde CSS puro, descomenta la siguiente línea.
*/
/*
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
*/

:root {
  /* =================================================================
     COLOR SYSTEM
     Philosophy: warm off-white base, deep not-quite-black ink,
     brass as the only truly "brand" color. Everything else is
     functional utility. No gradients. No pure white. No pure black.
     ================================================================= */

  /* -- Neutrals (paper & ink) — Palette B · Concrete & Graphite ---- */
  --paper:        #F5F5F3;   /* page background — cool off-white */
  --paper-2:      #ECECE8;   /* raised surfaces, subtle fills */
  --paper-3:      #DEDEDA;   /* dividers between sections */
  --linen:        #C9C9C3;   /* alt surface, deeper */

  --ink:          #1C1C19;   /* primary text — near-black graphite */
  --ink-2:        #34342F;   /* secondary text */
  --ink-3:        #555551;   /* tertiary / meta */
  --ink-4:        #7E7E78;   /* disabled / placeholder */
  --ink-5:        #AEAEA7;   /* hairlines, decorative */

  /* -- Brass (primary brand accent) --------------------------------- */
  /* The signature color. Restrained. Never saturated. Feels metallic. */
  --brass:        #9B7A3F;   /* primary brass */
  --brass-deep:   #7A5E2E;   /* hover / pressed */
  --brass-light:  #C9A86A;   /* highlight edge */
  --brass-pale:   #EFE4CC;   /* fill tint */
  --brass-wash:   #F7F0DE;   /* subtlest tint for panels */

  /* -- Prussian Blue (secondary, carried over from existing UI) ----- */
  /* Used for links, primary actions where brass would be overkill,
     and for the "trust" moments (totals, key numbers). */
  --prussian:       #1F3A5F;
  --prussian-deep:  #142842;
  --prussian-light: #3C5F8A;
  --prussian-pale:  #D9E2EF;
  --prussian-wash:  #EEF3FA;

  /* -- Semantic (muted, restaurant-appropriate) --------------------- */
  /* Success: sage, like fresh herbs. Not tech-green. */
  --sage:        #6B8E6A;
  --sage-pale:   #D7E4D4;
  --sage-wash:   #EEF4EC;

  /* Warning: amber, like Edison-bulb light. Not hazard yellow. */
  --amber:       #B8863E;
  --amber-pale:  #EFDFBC;
  --amber-wash:  #FAF2DF;

  /* Danger: rust, like dried brick. Not alarm red. */
  --rust:        #A84A2F;
  --rust-pale:   #ECC9BD;
  --rust-wash:   #F8E9E3;

  /* -- Functional aliases ------------------------------------------- */
  --bg:              var(--paper);
  --bg-raised:       #FFFFFF;    /* cards sit one step above paper */
  --bg-sunken:       var(--paper-2);
  --bg-panel:        var(--paper-2);

  --fg:              var(--ink);
  --fg-muted:        var(--ink-2);
  --fg-subtle:       var(--ink-3);
  --fg-faint:        var(--ink-4);

  --border:          var(--ink-5);
  --border-strong:   var(--ink-4);
  --border-hairline: rgba(28, 28, 25, 0.08);

  --link:            var(--prussian);
  --link-hover:      var(--prussian-deep);

  --accent:          var(--brass);
  --accent-hover:    var(--brass-deep);

  --success:         var(--sage);
  --warning:         var(--amber);
  --danger:          var(--rust);

  /* -- Legacy compat con el panel actual (deprecar progresivamente) - */
  /* Estas variables las usa el base.html antiguo — las redirigimos
     para que el panel existente siga funcionando mientras migramos. */
  --color-primary:       var(--prussian);
  --color-primary-soft:  var(--prussian-wash);
  --color-warn:          var(--amber);
  --color-danger:        var(--rust);
  --color-ok:            var(--sage);

  /* =================================================================
     TYPOGRAPHY
     Three families, clear jobs:
     · Plex Sans — UI, body, buttons, labels (modernist industrial)
     · EB Garamond — display, hero, serif accents (bistro menu)
     · Plex Mono — numbers, codes, meta, tabular (technical plate)
     ================================================================= */

  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'EB Garamond', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* -- Weights (Plex Sans supports these natively) ------------------ */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* -- Scale — compact, mobile-first (380–420px base) --------------- */
  --text-text-2xs: 16px;   /* tiny labels, legal */
  --text-text-xs: 17px;   /* meta, small caps */
  --text-text-sm: 19px;   /* captions, secondary body */
  --text-text-base: 20px;   /* body */
  --text-text-md: 22px;   /* emphasized body */
  --text-text-lg: 24px;   /* section titles */
  --text-text-xl: 28px;   /* page titles sans */
  --text-text-2xl: 36px;   /* display small */
  --text-text-3xl: 46px;   /* display */
  --text-text-4xl: 66px;   /* hero */
  --text-text-5xl: 90px;   /* hero big */

  /* -- Leading ------------------------------------------------------ */
  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.45;
  --leading-relaxed:1.6;

  /* -- Tracking ----------------------------------------------------- */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;   /* uppercase labels */
  --tracking-widest:   0.14em;   /* small caps section headers */

  /* =================================================================
     SPACING & LAYOUT
     8px base grid. Use generous steps between sections.
     ================================================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* =================================================================
     RADII — intentionally small. Square is the default.
     ================================================================= */
  --radius-0:     0;
  --radius-xs:    2px;   /* inputs, small chips */
  --radius-sm:    4px;   /* cards, most surfaces */
  --radius-md:    6px;   /* modals */
  --radius-lg:    8px;   /* rare — containers only */
  --radius-pill: 999px;  /* avoid; only for counter badges */

  /* =================================================================
     BORDERS — hairline is the signature. 0.5px where supported.
     ================================================================= */
  --hairline:   0.5px solid var(--border-hairline);
  --rule:       1px solid var(--border);
  --rule-ink:   1px solid var(--ink);

  /* =================================================================
     SHADOWS — flat, inky, barely there. No blur-heavy drop shadows.
     ================================================================= */
  --shadow-xs:   0 1px 0 rgba(28, 28, 25, 0.04);
  --shadow-sm:   0 1px 2px rgba(28, 28, 25, 0.06), 0 0 0 0.5px rgba(28, 28, 25, 0.04);
  --shadow-md:   0 2px 6px rgba(28, 28, 25, 0.08), 0 0 0 0.5px rgba(28, 28, 25, 0.06);
  --shadow-lg:   0 8px 24px rgba(28, 28, 25, 0.10), 0 0 0 0.5px rgba(28, 28, 25, 0.06);
  --shadow-inset:inset 0 1px 0 rgba(28, 28, 25, 0.04);

  /* =================================================================
     MOTION — short, crisp, standard easing. No bounces.
     ================================================================= */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    260ms;
}

/* =====================================================================
   BASE RESET Y TIPOGRAFÍA GLOBAL
   Se aplica directo al body y tags semánticos. Tailwind CDN los puede
   sobreescribir con utility classes, pero éste es el default.
   ===================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss02", "ss03";  /* Plex alt forms — straight lowercase a, l */
}

/* =====================================================================
   CLASES SEMÁNTICAS MAÎTRE (prefijo .m-)
   Usar junto a (o en lugar de) utility classes de Tailwind.
   ===================================================================== */

/* Display (serif) — hero moments, quotes, section openers */
.m-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.m-display-lg {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
}

.m-display-xl {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-5xl);
  line-height: 0.98;
  letter-spacing: var(--tracking-tightest);
}

.m-display-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}

/* Headings (sans, in-product) */
.m-h1 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--prussian);
}

.m-h2 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.m-h3 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--ink);
}

/* Eyebrow — the signature small-caps section label */
.m-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Label — input / field titles */
.m-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  letter-spacing: 0;
}

/* Caption / meta */
.m-caption {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--leading-normal);
}

/* Mono — numbers, codes, times, capacities */
.m-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.m-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Serif italic — used sparingly for the AI's "voice" (what Daniela says) */
.m-voice {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--ink-2);
}

/* Technical drawing rule — the horizontal hairline that appears everywhere */
.m-rule {
  height: 0;
  border: 0;
  border-top: 0.5px solid var(--ink-5);
  margin: 0;
}

.m-rule-ink {
  height: 0;
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 0;
}

/* Links */
.m-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.m-link:hover { color: var(--link-hover); }