/* ============================================================
   TuCarro360 — Design Tokens
   colors_and_type.css
   Vehicle-security ecosystem · Colombia
   ============================================================ */

/* ============================================================
   FONTS
   Montserrat = the TuCarro360 brand typeface (self-hosted, brand-supplied).
   Variable weight 100–900 + matching italics.
   JetBrains Mono (mono, codes/policy numbers only) loaded from CDN.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     BRAND CORE  (the 7 palette anchors provided)
     --------------------------------------------------------- */
  --tc-white:      #ffffff;
  --tc-blue:       #165dfc; /* primary / action */
  --tc-ink:        #101828; /* near-black navy ink */
  --tc-sage:       #93b0ae; /* muted teal-gray neutral */
  --tc-black:      #000000;
  --tc-green:      #69e38e; /* fresh accent · "secure / active" */
  --tc-mist:       #f1f7ff; /* light blue surface tint */

  /* ---------------------------------------------------------
     PRIMARY (blue) SCALE  — derived around #165dfc
     --------------------------------------------------------- */
  --blue-50:  #f1f7ff;
  --blue-100: #dde9ff;
  --blue-200: #bcd3ff;
  --blue-300: #8fb3ff;
  --blue-400: #5688fc;
  --blue-500: #165dfc; /* base */
  --blue-600: #0f49d6;
  --blue-700: #1139a8;
  --blue-800: #142f80;
  --blue-900: #101f4f;

  /* ---------------------------------------------------------
     GREEN (accent) SCALE — derived around #69e38e
     --------------------------------------------------------- */
  --green-50:  #ecfdf1;
  --green-100: #d2fbdf;
  --green-200: #a8f4c1;
  --green-300: #69e38e; /* base accent */
  --green-400: #36c869;
  --green-500: #18a64f;
  --green-600: #0f8240;
  --green-700: #0f6736;

  /* ---------------------------------------------------------
     NEUTRAL (slate) SCALE — ink → white, plus sage tints
     --------------------------------------------------------- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafbfc;
  --neutral-50:  #f5f7fa;
  --neutral-100: #eef1f6;
  --neutral-200: #dfe4ec;
  --neutral-300: #c4ccd8;
  --neutral-400: #97a2b4;
  --neutral-500: #69748a;
  --neutral-600: #4a5468;
  --neutral-700: #344054;
  --neutral-800: #1e2735;
  --neutral-900: #101828; /* ink */

  /* Sage support (muted teal-gray) */
  --sage-100: #e7eeed;
  --sage-200: #cdddda;
  --sage-300: #93b0ae; /* base */
  --sage-400: #6f9290;
  --sage-500: #51706e;

  /* ---------------------------------------------------------
     SEMANTIC — surfaces, text, lines, status
     --------------------------------------------------------- */
  --surface-base:     var(--neutral-0);   /* page background */
  --surface-tint:     var(--tc-mist);     /* alternating sections */
  --surface-raised:   var(--neutral-0);   /* cards */
  --surface-sunken:   var(--neutral-50);  /* wells / fields */
  --surface-ink:      var(--tc-ink);      /* dark sections / footer */
  --surface-brand:    var(--tc-blue);     /* brand fills */

  --text-strong:   var(--neutral-900);    /* headings */
  --text-default:  #2a3447;               /* body */
  --text-muted:    var(--neutral-500);    /* secondary */
  --text-subtle:   var(--neutral-400);    /* captions / meta */
  --text-onbrand:  var(--neutral-0);      /* text on blue */
  --text-oninkmute:#a9b4c6;               /* muted text on ink */
  --text-link:     var(--tc-blue);

  --border-subtle: var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand:  var(--tc-blue);

  --status-success: var(--green-500);
  --status-success-bg: var(--green-50);
  --status-info:    var(--tc-blue);
  --status-info-bg: var(--blue-50);
  --status-warn:    #f59e0b;
  --status-warn-bg: #fff7ec;
  --status-danger:  #e5484d;
  --status-danger-bg:#fdecec;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(22, 93, 252, 0.32);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale (rem-based, 1rem = 16px) */
  --fs-display: 4.25rem;   /* 68 — hero */
  --fs-h1:      3rem;      /* 48 */
  --fs-h2:      2.25rem;   /* 36 */
  --fs-h3:      1.625rem;  /* 26 */
  --fs-h4:      1.25rem;   /* 20 */
  --fs-lead:    1.1875rem; /* 19 — intro paragraph */
  --fs-body:    1rem;      /* 16 */
  --fs-sm:      0.875rem;  /* 14 */
  --fs-xs:      0.75rem;   /* 12 — labels / meta */

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.14em; /* uppercase eyebrows */

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

  /* ---------------------------------------------------------
     RADII
     --------------------------------------------------------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill:999px;

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

  /* ---------------------------------------------------------
     ELEVATION  (cool navy-tinted shadows)
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.07);
  --shadow-md: 0 8px 22px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 18px 40px rgba(16, 24, 40, 0.12);
  --shadow-brand: 0 12px 28px rgba(22, 93, 252, 0.30);
  --shadow-green: 0 10px 24px rgba(54, 200, 105, 0.28);

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES  (optional helpers)
   ============================================================ */
.tc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tc-blue);
}
.tc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.tc-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.tc-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.tc-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.tc-h4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: 1.35; color: var(--text-strong); }
.tc-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-muted); }
.tc-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-default); }
.tc-sm   { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.tc-mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0; }