/* =========================================================
   Woki Design System — Colors & Type
   Copia de 1-design-system/colors_and_type.css.
   Único cambio: las tipografías se sirven en woff2 desde
   este mismo dominio, no desde el design system ni un CDN.
   ========================================================= */

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/MonaSans-Variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Type families =====
     Mona Sans → Display, headlines, brand moments. Apple-minimalist feel.
     Figtree   → UI, body, product surfaces. Warm, humanist, friendly.
     Mono      → Data, IDs, timestamps. */
  --font-display: 'Mona Sans', 'Figtree', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ===== Type scale (fluid, optimized for product + marketing) ===== */
  --fs-12: 12px;   --lh-12: 16px;
  --fs-14: 14px;   --lh-14: 20px;
  --fs-16: 16px;   --lh-16: 24px;
  --fs-18: 18px;   --lh-18: 28px;
  --fs-20: 20px;   --lh-20: 28px;
  --fs-24: 24px;   --lh-24: 32px;
  --fs-32: 32px;   --lh-32: 38px;
  --fs-40: 40px;   --lh-40: 46px;
  --fs-56: 56px;   --lh-56: 60px;
  --fs-72: 72px;   --lh-72: 76px;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* =========================================================
     Neutrals — warm off-whites + true deep ink
     (Apple-minimalist surface palette)
     ========================================================= */
  --bg:           #FFFFFF;
  --bg-soft:      #FAF7F4;   /* warm off-white, default page bg */
  --bg-muted:     #F3EFEA;   /* section alt, subtle warmth */
  --bg-inverse:   #0E0F12;   /* near-black hero/footer */
  --surface:      #FFFFFF;
  --surface-hi:   #FFFFFF;
  --surface-sunk: #F6F2ED;

  --border:       #E8E3DD;
  --border-strong:#D6CFC5;
  --border-ink:   #0E0F12;

  --fg:           #212227;    /* Primary ink — Woki Black */
  --fg-1:         #212227;
  --fg-2:         #3E3F45;    /* secondary body */
  --fg-3:         #6B6C72;    /* muted */
  --fg-4:         #9A9AA1;    /* placeholder */
  --fg-inverse:   #FFFFFF;
  --fg-inverse-2: rgba(255,255,255,0.72);

  /* =========================================================
     B2B — Blue track (from logo gradient #132F60 → #0066CC)
     Used on restaurantes.wokiapp.com
     ========================================================= */
  /* Per brand manual (corrected per stakeholder):
     - PRIMARY ink:           #212227  (textos oscuros — siempre)
     - PRIMARY blue:          #0066CC  (Celeste Woki — CTAs/acentos)
     - SECONDARY:             #132F60  (Azul Profundo — soporte)
     - Azul 2 (deep):         #202B3F  (utility, gradients) */
  --b2b-50:  #EEF4FC;
  --b2b-100: #D6E4F7;
  --b2b-200: #A9C5EF;
  --b2b-300: #6E9FE4;
  --b2b-400: #2E79D6;
  --b2b-500: #0066CC;   /* Celeste Woki — PRIMARY blue */
  --b2b-600: #0A4FA0;
  --b2b-700: #143D7C;
  --b2b-800: #132F60;   /* Azul Profundo — SECONDARY */
  --b2b-900: #202B3F;   /* Azul 2 — utility */

  --b2b-ink:             #212227;   /* Primary ink — todos los textos oscuros */
  --b2b-primary:         var(--b2b-500);   /* #0066CC */
  --b2b-primary-ink:     var(--b2b-ink);   /* #212227 */
  --b2b-secondary:       var(--b2b-800);   /* #132F60 */
  --b2b-primary-accent:  var(--b2b-500);
  /* Official gradient from brand manual: 60°, #202B3F → #0066CC */
  --b2b-gradient: linear-gradient(60deg, #202B3F 0%, #0066CC 100%);
  --b2b-gradient-soft: linear-gradient(60deg, #EEF4FC 0%, #D6E4F7 100%);

  /* =========================================================
     B2C — Orange/Red track (from logo gradient #F86704 → #BA1919)
     Used on wokiapp.com and the consumer mobile app
     ========================================================= */
  /* Per brand manual:
     - Naranja Woki (primary): #F86704  (C0 M70 Y95 K0)
     - Naranja (secondary):    #E84400  (C0 M85 Y100 K0)
     - Bordó (secondary):      #BA1919  (C20 M100 Y95 K10)
     - Naranja claro (tertiary): #FFAD5C (C0 M40 Y70 K0)
     - Naranja medio (tertiary): #FF9343 (C20 M100 Y95 K10)
     - Degradado Woki B2C:     left #BA1919 → right #F86704, 60° */
  --b2c-50:  #FFF3EC;
  --b2c-100: #FFE1CC;
  --b2c-200: #FFAD5C;   /* Naranja claro — tertiary */
  --b2c-300: #FF9343;   /* Naranja medio — tertiary */
  --b2c-400: #FA7820;
  --b2c-500: #F86704;   /* Naranja Woki — PRIMARY */
  --b2c-600: #E84400;   /* Naranja — secondary */
  --b2c-700: #C93213;
  --b2c-800: #BA1919;   /* Bordó — secondary */
  --b2c-900: #7A1111;

  --b2c-primary:         var(--b2c-500);
  --b2c-primary-accent:  var(--b2c-800);
  /* Official gradient from brand manual: 60°, #BA1919 (left) → #F86704 (right) */
  --b2c-gradient: linear-gradient(60deg, #BA1919 0%, #F86704 100%);
  --b2c-gradient-soft: linear-gradient(60deg, #FFF3EC 0%, #FFE1CC 100%);

  /* =========================================================
     Semantic (shared)
     ========================================================= */
  --success:     #138A36;
  --success-bg:  #E7F6EC;
  --warning:     #FCBF49;   /* Amber — brand-approved warning */
  --warning-bg:  #FFF5DC;
  --warning-fg:  #6E4300;   /* For text on top of --warning-bg (AA contrast) */
  --danger:      #C42525;
  --danger-bg:   #FBEAEA;
  --info:        var(--b2b-500);
  --info-bg:     var(--b2b-50);

  /* =========================================================
     Default brand = B2B (most UI surface is ops/admin).
     For B2C, set data-brand="b2c" on the root.
     ========================================================= */
  --brand:            var(--b2b-primary);
  --brand-accent:     var(--b2b-primary-accent);
  --brand-gradient:   var(--b2b-gradient);
  --brand-soft:       var(--b2b-50);
  --brand-fg-on:      #FFFFFF;

  /* ===== Radii =====
     RULE: nunca ángulos rectos. Minimum radius on any surface is 6px.
     Use --r-pill on buttons, tags and CTAs. */
  --r-xs: 6px;    /* minimum — inputs, small chips, dense UI */
  --r-sm: 10px;   /* badges, inline pills that aren't fully round */
  --r-md: 14px;   /* cards, menus, modals */
  --r-lg: 18px;   /* feature cards, hero containers */
  --r-xl: 24px;   /* large surfaces, image frames */
  --r-2xl: 32px;  /* marketing sections, full-bleed panels */
  --r-pill: 999px;

  /* ===== Shadows (soft, warm) ===== */
  --shadow-xs: 0 1px 2px rgba(14, 15, 18, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 15, 18, 0.06), 0 1px 2px rgba(14, 15, 18, 0.04);
  --shadow-md: 0 8px 24px rgba(14, 15, 18, 0.08), 0 2px 6px rgba(14, 15, 18, 0.04);
  --shadow-lg: 0 24px 48px rgba(14, 15, 18, 0.12), 0 4px 12px rgba(14, 15, 18, 0.06);
  --shadow-xl: 0 40px 80px rgba(14, 15, 18, 0.18);
  --ring-focus: 0 0 0 3px rgba(0, 102, 204, 0.25);
  --ring-focus-b2c: 0 0 0 3px rgba(248, 103, 4, 0.25);

  /* ===== Spacing (8-pt base, with 4-pt half-steps) ===== */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ===== Motion ===== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* B2C brand override */
[data-brand="b2c"] {
  --brand:          var(--b2c-primary);
  --brand-accent:   var(--b2c-primary-accent);
  --brand-gradient: var(--b2c-gradient);
  --brand-soft:     var(--b2c-50);
  --brand-fg-on:    #FFFFFF;
}

/* Dark mode for product surfaces (admin) */
[data-theme="dark"] {
  --bg:         #0E0F12;
  --bg-soft:    #14151A;
  --bg-muted:   #1B1C22;
  --surface:    #191A20;
  --surface-hi: #1F212A;
  --surface-sunk:#0E0F12;
  --border:     #2A2C34;
  --border-strong: #3A3C46;
  --fg:         #F5F4F1;
  --fg-1:       #F5F4F1;
  --fg-2:       #C8C8CD;
  --fg-3:       #9A9AA1;
  --fg-4:       #6B6C72;
  --fg-inverse: #0E0F12;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.6);
}

/* =========================================================
   Semantic type classes — use these directly in markup.
   ========================================================= */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  line-height: var(--lh-72);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-56);
  line-height: var(--lh-56);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: var(--lh-40);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-body);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--fg-2);
}

/* Base reset + sensible defaults */
html, body {
  background: var(--bg-soft);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }