/* =========================================================
   GetHor — Colors & Typography
   Sistema de planificación de turnos con IA
   Palette: Warm Teal + Amber (hospitality-friendly)
   Type: DM Sans (humanist) + DM Mono (tabular)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500;1,700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOR — primitives ---------- */

  /* Teal (primario) */
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;  /* base */
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;
  --teal-950: #042F2E;

  /* Amber (acento) */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;  /* base */
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;

  /* Stone (neutrales cálidos) */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;
  --stone-950: #0C0A09;

  /* Semánticos */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-500: #22C55E;
  --success-600: #16A34A;
  --success-700: #15803D;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  --info-50:  #F0FDFA;
  --info-500: #14B8A6;
  --info-600: #0D9488;

  /* WhatsApp brand (para previews de mensajes) */
  --wa-green-bg:    #E7FFDB;
  --wa-green-mark:  #25D366;
  --wa-bubble-out:  #DCF8C6;
  --wa-bubble-in:   #FFFFFF;
  --wa-bg:          #ECE5DD;
  --wa-text:        #303030;
  --wa-meta:        #667781;

  /* ---------- COLOR — semantic tokens ---------- */

  /* Surfaces */
  --bg:               var(--stone-50);
  --surface:          var(--stone-50);
  --surface-elevated: #FFFFFF;
  --surface-sunken:   var(--stone-100);
  --surface-inverse:  var(--stone-900);

  /* Foregrounds */
  --fg-1: var(--stone-900); /* primary text */
  --fg-2: var(--stone-700); /* secondary */
  --fg-3: var(--stone-500); /* tertiary, captions */
  --fg-4: var(--stone-400); /* placeholder, disabled */
  --fg-on-primary: #FFFFFF;
  --fg-on-accent:  var(--stone-900);
  --fg-inverse:    var(--stone-50);

  /* Borders */
  --border-1: var(--stone-200); /* default */
  --border-2: var(--stone-300); /* inputs, stronger */
  --border-3: var(--stone-400); /* pressed/active */
  --border-focus: var(--teal-600);

  /* Brand actions */
  --brand:           var(--teal-600);
  --brand-hover:     var(--teal-700);
  --brand-press:     var(--teal-800);
  --brand-soft:      var(--teal-50);
  --brand-soft-hover: var(--teal-100);
  --brand-fg:        #FFFFFF;

  --accent:          var(--amber-500);
  --accent-hover:    var(--amber-600);
  --accent-soft:     var(--amber-50);
  --accent-fg:       var(--stone-900);

  /* Status */
  --success:      var(--success-600);
  --success-soft: var(--success-50);
  --warning:      var(--warning-600);
  --warning-soft: var(--warning-50);
  --danger:       var(--danger-600);
  --danger-soft:  var(--danger-50);
  --info:         var(--info-600);
  --info-soft:    var(--info-50);

  /* AI accent (sugerencias del asistente IA) */
  --ai-fg:    var(--amber-700);
  --ai-bg:    var(--amber-50);
  --ai-border: var(--amber-200);

  /* ---------- TYPOGRAPHY ---------- */

  --font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.25 ratio, base 16) */
  --fs-display: 48px;  --lh-display: 56px;
  --fs-h1:      32px;  --lh-h1:      40px;
  --fs-h2:      24px;  --lh-h2:      32px;
  --fs-h3:      20px;  --lh-h3:      28px;
  --fs-body:    16px;  --lh-body:    24px;
  --fs-small:   14px;  --lh-small:   20px;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-tiny:    11px;  --lh-tiny:    14px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------- SPACING (4px scale) ---------- */
  --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 ---------- */
  --radius-0:    0px;     /* default — sharp */
  --radius-1:    2px;     /* schedule cells */
  --radius-2:    4px;     /* small chips */
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ---------- SHADOWS ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 1px 0 rgb(0 0 0 / 0.02);
  --shadow-2: 0 4px 16px -2px rgb(13 148 136 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-3: 0 12px 32px -8px rgb(13 148 136 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.06);
  --shadow-focus: 0 0 0 3px rgb(13 148 136 / 0.20);
  --shadow-inset: inset 0 1px 0 0 rgb(255 255 255 / 0.04);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   150ms;
  --dur-default: 220ms;
  --dur-modal:   320ms;

  /* ---------- LAYOUT ---------- */
  --sidebar-w:   240px;
  --header-h:    64px;
  --container-max: 1440px;
}

/* ========================================================
   BASE — semantic element defaults
   ======================================================== */

html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semi); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semi); }
h4 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semi); }

p { margin: 0; text-wrap: pretty; }

small, .text-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.text-caption    { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.text-eyebrow {
  font-size: var(--fs-tiny);
  line-height: var(--lh-tiny);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  color: var(--fg-3);
}
.text-mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-tabular { font-variant-numeric: tabular-nums; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--brand-hover); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--teal-200); color: var(--stone-900); }

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

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}