/* =====================================================================
   Blump Design System — Foundations
   Colors, type scales, spacing, radii, shadows, motion
   ===================================================================== */

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

:root {
  /* ---------- Brand: Blump Orange (kinetic, signature) ---------- */
  --blump-50:  #fff4ec;
  --blump-100: #ffe2cd;
  --blump-200: #ffc299;
  --blump-300: #ffa066;
  --blump-400: #ff7e35;
  --blump-450: #ff6c2a;   /* warm hover for 400 surfaces */
  --blump-500: #ff5a1f;   /* PRIMARY — the brand orange, refined */
  --blump-550: #f24f18;   /* gentle press / hover from 500 */
  --blump-600: #e64512;   /* hover / pressed dark */
  --blump-700: #b8350c;
  --blump-800: #862607;
  --blump-900: #501704;

  /* ---------- Tech: Cobalt (data, trust, the "engine" color) ---------- */
  --cobalt-50:  #eef2ff;
  --cobalt-100: #dbe3ff;
  --cobalt-200: #b8c7ff;
  --cobalt-300: #8ea4ff;
  --cobalt-400: #5f7dff;
  --cobalt-450: #4c69fa;   /* hover from 400 */
  --cobalt-500: #3955f6;
  --cobalt-550: #314ae8;   /* hover from 500 */
  --cobalt-600: #2a3fdb;   /* secondary action */
  --cobalt-700: #1f2fa8;
  --cobalt-800: #182378;
  --cobalt-900: #0e154a;

  /* ---------- Ink (warm near-black, not pure) ---------- */
  --ink-50:  #f6f5f3;
  --ink-100: #ecebe7;
  --ink-200: #d6d4cc;
  --ink-300: #b6b3a7;
  --ink-400: #8a8779;
  --ink-500: #5d5a4f;
  --ink-600: #3e3c34;
  --ink-700: #28271f;
  --ink-800: #1a1915;     /* default ink for text on light */
  --ink-900: #0e0d0a;     /* deepest, headlines */

  /* ---------- Paper (warm off-whites) ---------- */
  --paper-0:  #ffffff;
  --paper-50: #faf7f2;    /* default surface — workshop paper */
  --paper-100:#f3efe6;
  --paper-200:#e8e1d2;

  /* ---------- Semantic ---------- */
  --trail-500: #2bb673;   /* success — "manutenção feita" */
  --trail-600: #1f9259;
  --trail-50:  #e7f7ee;

  --amber-500: #f5a524;   /* warning — "atrasado" */
  --amber-50:  #fdf3dd;

  --rust-500:  #e63946;   /* error / cancel */
  --rust-50:   #fde7e9;

  --strava:    #fc4c02;   /* Strava integration color, used SPARINGLY */

  /* ---------- Semantic mapping (fg/bg) ---------- */
  --fg-1:      var(--ink-900);    /* primary text, headlines */
  --fg-2:      var(--ink-700);    /* body */
  --fg-3:      var(--ink-500);    /* secondary text, labels */
  --fg-4:      var(--ink-400);    /* tertiary, placeholders */
  --fg-onbrand:#ffffff;
  --fg-link:   var(--cobalt-600);

  --bg-canvas: var(--paper-50);   /* page background */
  --bg-card:   var(--paper-0);    /* elevated card */
  --bg-sunk:   var(--paper-100);  /* sunken surface, code, input filled */
  --bg-brand:  var(--blump-500);

  --stroke-1:  var(--ink-200);    /* default border */
  --stroke-2:  var(--ink-100);    /* hairline */
  --stroke-3:  rgba(20, 19, 15, 0.08);

  /* ---------- Type families ---------- */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale (rem assumes 16px base) ---------- */
  --t-display-1: 4.5rem;   /* 72 */
  --t-display-2: 3.5rem;   /* 56 */
  --t-h1: 2.5rem;          /* 40 */
  --t-h2: 2rem;            /* 32 */
  --t-h3: 1.5rem;          /* 24 */
  --t-h4: 1.25rem;         /* 20 */
  --t-body-lg: 1.125rem;   /* 18 */
  --t-body:    1rem;       /* 16 */
  --t-body-sm: 0.875rem;   /* 14 */
  --t-caption: 0.75rem;    /* 12 */
  --t-overline: 0.6875rem; /* 11, uppercase tracked */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.65;

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

  /* ---------- Spacing (4-pt grid) ---------- */
  --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 (generous, friendly — the "rounded" of the wordmark) ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------- Shadows (warm, soft, never gray) ---------- */
  --shadow-xs: 0 1px 1px rgba(26, 25, 21, 0.05);
  --shadow-sm: 0 2px 6px rgba(26, 25, 21, 0.06), 0 1px 2px rgba(26, 25, 21, 0.04);
  --shadow-md: 0 8px 20px rgba(26, 25, 21, 0.08), 0 2px 4px rgba(26, 25, 21, 0.05);
  --shadow-lg: 0 20px 40px rgba(26, 25, 21, 0.10), 0 6px 12px rgba(26, 25, 21, 0.05);
  --shadow-pop: 0 30px 60px rgba(255, 90, 31, 0.18), 0 8px 20px rgba(26, 25, 21, 0.10);
  --shadow-inner: inset 0 1px 2px rgba(26, 25, 21, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.85, 0.35);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- Layout ---------- */
  --max-w-prose: 68ch;
  --max-w-page:  1280px;
}

/* ===================== Semantic element styles ===================== */

html { -webkit-text-size-adjust: 100%; }

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

.display-1, h1.display, .t-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.display-2, .t-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); }
.t-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-body); }
.t-caption { font-size: var(--t-caption); line-height: var(--lh-snug); color: var(--fg-3); }

.t-overline, .overline {
  font-family: var(--font-body);
  font-size: var(--t-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-over);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01", "cv11";
}

code {
  padding: 2px 6px;
  background: var(--bg-sunk);
  border-radius: var(--r-xs);
  color: var(--ink-700);
}

/* Tabular numerals for any data, KPIs, counts */
.t-num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--blump-200); color: var(--ink-900); }