/* =========================================================================
   Convecta — Core Design Tokens
   Colors derived from the 2019 Convecta logo (sampled from logo-convecta.png).
   Type stack: Manrope (display) + Open Sans (body) via Google Fonts.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap");

:root {
  /* ---------- Brand palette (the 5 “petals” of the Convecta mark) -------- */
  --c-orange:   #F39339;   /* warm petal — primary action / energy */
  --c-red:      #BB3A36;   /* crimson petal — alerts, “Tecnológicas” accent */
  --c-magenta:  #BD569C;   /* magenta petal — secondary accent */
  --c-plum:     #744F6F;   /* purple-brown petal — depth / overlay */
  --c-teal:     #49B9A5;   /* mint petal — success / data accent */
  --c-emerald:  #00A174;   /* darker teal variant for AA contrast on white */
  --c-blue:     #2F6CB5;   /* extended palette — Metrics product accent */

  /* Tints (≈ 12% over white) for soft backgrounds */
  --c-orange-tint:  #FDEBD6;
  --c-red-tint:     #F4D9D8;
  --c-magenta-tint: #F3DEEB;
  --c-plum-tint:    #E5DDE3;
  --c-teal-tint:    #DBF1ED;
  --c-blue-tint:    #DCE7F5;

  /* Shades (≈ 18% darker) for hover / active */
  --c-orange-deep:  #D97A1F;
  --c-red-deep:     #9A2A26;
  --c-magenta-deep: #9A3F7E;
  --c-plum-deep:    #553651;
  --c-teal-deep:    #2E9A87;
  --c-blue-deep:    #1F4E89;

  /* ---------- Neutrals — drawn from the wordmark gray ------------------- */
  --n-0:   #FFFFFF;
  --n-50:  #FAFAFA;
  --n-100: #F2F2F2;   /* page background */
  --n-200: #E6E6E6;   /* hairlines / dividers */
  --n-300: #CFCFCF;
  --n-400: #A6A5A5;   /* placeholder / disabled */
  --n-500: #8C8B8B;
  --n-600: #706F6F;   /* WORDMARK GRAY — primary text on light */
  --n-700: #585757;
  --n-800: #3E3D3D;
  --n-900: #1F1F1F;

  /* ---------- Semantic foreground / background -------------------------- */
  --fg-1:  var(--n-800);        /* primary text */
  --fg-2:  var(--n-600);        /* secondary text */
  --fg-3:  var(--n-500);        /* tertiary / captions */
  --fg-mute: var(--n-400);      /* placeholder */
  --fg-inv: var(--n-0);

  --bg-app:    var(--n-100);    /* outer chrome */
  --bg-canvas: var(--n-0);      /* card / panel */
  --bg-sunken: var(--n-50);
  --bg-rail:   var(--n-900);    /* dark sidebar (Prop360 chrome) */
  --bg-rail-2: #2A2D34;

  --border:        var(--n-200);
  --border-strong: var(--n-300);

  /* ---------- Semantic intents ----------------------------------------- */
  --intent-primary:  var(--c-orange);
  --intent-primary-deep: var(--c-orange-deep);
  --intent-success:  var(--c-emerald);
  --intent-success-tint: var(--c-teal-tint);
  --intent-danger:   var(--c-red);
  --intent-danger-tint: var(--c-red-tint);
  --intent-warning:  #E5A52B;
  --intent-warning-tint: #FBEFD2;
  --intent-info:     #2F6CB5;
  --intent-info-tint:#DCE7F5;

  /* ---------- Per-product accents -------------------------------------- */
  --product-prop360:     var(--c-orange);    /* Prop360 — flagship */
  --product-operaciones: var(--c-red);       /* Operaciones (was Postventa) */
  --product-metrics:     var(--c-blue);      /* Metrics — analytics (blue) */
  --product-rentmanager: var(--c-magenta);   /* RentManager — rental mgmt */

  /* ---------- Spacing scale (4 px base) -------------------------------- */
  --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;

  /* ---------- Radii ---------------------------------------------------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Elevation ------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(31, 31, 31, .06), 0 1px 1px rgba(31, 31, 31, .04);
  --shadow-2: 0 4px 12px rgba(31, 31, 31, .08), 0 2px 4px rgba(31, 31, 31, .04);
  --shadow-3: 0 12px 28px rgba(31, 31, 31, .12), 0 4px 8px rgba(31, 31, 31, .06);
  --shadow-pop: 0 24px 48px rgba(31, 31, 31, .16);
  --ring-focus: 0 0 0 3px rgba(243, 147, 57, .35);  /* orange focus ring */

  /* ---------- Type families -------------------------------------------- */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* ---------- Type scale (line-height paired) -------------------------- */
  --fs-display: 56px;  --lh-display: 1.05;
  --fs-h1:      40px;  --lh-h1:      1.15;
  --fs-h2:      32px;  --lh-h2:      1.2;
  --fs-h3:      24px;  --lh-h3:      1.25;
  --fs-h4:      20px;  --lh-h4:      1.3;
  --fs-lg:      18px;  --lh-lg:      1.45;
  --fs-body:    15px;  --lh-body:    1.55;
  --fs-sm:      13px;  --lh-sm:      1.5;
  --fs-xs:      11px;  --lh-xs:      1.45;

  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.12em;
}

/* =========================================================================
   Semantic element styles — use these classes (or extend) to stay on-brand.
   ========================================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 800; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 800; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 700; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-red);
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); }
.lede   { font-size: var(--fs-lg);   line-height: var(--lh-lg);   color: var(--fg-2); }
.caption{ font-size: var(--fs-sm);   line-height: var(--lh-sm);   color: var(--fg-3); }
.micro  { font-size: var(--fs-xs);   line-height: var(--lh-xs);   color: var(--fg-3); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

a { color: var(--c-emerald); text-decoration: none; }
a:hover { color: var(--c-teal-deep); text-decoration: underline; }