/* =========================================================
   Compactica Design System — colors & type tokens
   ========================================================= */

@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -----------------------------------------------------
     Brand palette — locked
     ----------------------------------------------------- */
  --c-blue:          #1e7fc0;   /* Compactica Blue — primary background, anchors, links */
  --c-blue-bright:   #5fb6f1;   /* Supporting blue — emphasis on dark backgrounds (use sparingly) */
  --c-white:         #ffffff;   /* Primary background, negative space */
  --c-navy:          #1f2f3a;   /* Dark navy / slate — secondary backgrounds, overlays */
  --c-grey:          #e6e6e6;   /* Neutral grey — dividers, tables, secondary UI */
  --c-black:         #000000;   /* Default text colour */

  /* Tonal extensions, derived from the locked palette.
     Use SPARINGLY; the system is intentionally narrow. */
  --c-blue-dark:     #145a8c;   /* hover / pressed blue */
  --c-blue-tint:     #eaf3fb;   /* faint blue wash for callouts on white */
  --c-navy-soft:     #2a3f4e;   /* one step lighter than navy, for cards on navy */
  --c-grey-line:     #d0d4d8;   /* dividers that need slightly more contrast than --c-grey */
  --c-grey-text:     #5a6470;   /* muted body on white — meets AA on white */

  /* Supporting brand colors — historic palette, kept for legacy continuity.
     Use SPARINGLY: accents, secondary backgrounds in long-form materials,
     never as primary brand surface. Compactica blue + navy lead. */
  --c-brown-dark:    #561800;   /* deep brown background (sparing) */
  --c-brown-med:     #6f3a2c;   /* medium brown background (sparing) */
  --c-brown-bright:  #b55c47;   /* supporting text on dark (sparing) */

  /* -----------------------------------------------------
     Semantic foreground / background
     ----------------------------------------------------- */
  --fg-1: var(--c-black);         /* primary text on light surfaces */
  --fg-2: var(--c-grey-text);     /* muted / supporting text on light */
  --fg-on-dark-1: var(--c-white); /* primary text on dark surfaces */
  --fg-on-dark-2: var(--c-blue-bright); /* emphasis on dark (sparingly) */
  --fg-link: var(--c-blue);

  --bg-1: var(--c-white);         /* default page */
  --bg-2: var(--c-navy);          /* secondary / overlay surface */
  --bg-3: var(--c-blue);          /* brand anchor surface */
  --bg-tint: var(--c-blue-tint);  /* callout wash on white */

  --border-1: var(--c-grey);
  --border-2: var(--c-grey-line);

  /* -----------------------------------------------------
     Type families
     ----------------------------------------------------- */
  --font-brand: "Baloo 2", "Quicksand", system-ui, sans-serif;   /* titles, headers, signage — LOWERCASE */
  --font-body:  Calibri, "Carlito", "Segoe UI", system-ui, sans-serif; /* body, captions, web copy */
  --font-mono:  "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* -----------------------------------------------------
     Type scale (1280 / 1920 surfaces — adjust per surface)
     ----------------------------------------------------- */
  --fs-display: 72px;   /* hero, signage */
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-body-lg: 19px;
  --fs-body:    16px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

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

  /* -----------------------------------------------------
     Spacing — 4px base
     ----------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* -----------------------------------------------------
     Radii, borders, elevation
     ----------------------------------------------------- */
  --r-0: 0px;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;     /* default for cards / buttons */
  --r-4: 22px;     /* large card / sheet */
  --r-pill: 999px;

  --bw-1: 1px;
  --bw-2: 2px;     /* default brand emphasis stroke */

  --shadow-1: 0 1px 2px rgba(31, 47, 58, 0.08);
  --shadow-2: 0 6px 20px rgba(31, 47, 58, 0.12);
  --shadow-3: 0 18px 48px rgba(31, 47, 58, 0.18);

  /* -----------------------------------------------------
     Motion — restrained, grounded
     ----------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* =====================================================
     PRODUCT UI LAYER — basecamp web + roller tablet
     The brand brief is narrow; the product needs more.
     These tokens are scoped to in-product surfaces only.
     ===================================================== */

  /* Product-surface font stack. The dashboard uses a
     humanist sans (Aptos/Calibri family) at sentence/Title
     Case — distinct from the brand's lowercase Baloo. */
  --font-product: "Aptos", "Aptos Display", "Segoe UI", Calibri, "Carlito", system-ui, sans-serif;

  /* Product accents */
  --p-indigo:        #6366f1;   /* active tab pill (risk), in-product selection */
  --p-indigo-soft:   #eef0ff;
  --p-blue:          #3b82f6;   /* primary action buttons inside basecamp (edit, save) */
  --p-blue-soft:     #e8f0fe;

  /* Status / chart palette — product only.
     Restricted to data viz and KPI surfaces. */
  --p-green:         #22c55e;
  --p-green-soft:    #e8f8ee;
  --p-green-ink:     #159948;
  --p-red:           #ef4444;
  --p-red-soft:      #fdecec;
  --p-amber:         #f59e0b;
  --p-amber-soft:    #fef3cf;
  --p-purple:        #7c5cdb;
  --p-purple-soft:   #f3efff;

  /* Roller-tablet (in-cab) — neon outlines on near-black */
  --t-bg:            #0a0d12;
  --t-panel:         #11151c;
  --t-border:        #1f2632;
  --t-text:          #ffffff;
  --t-speed:         #facc15;   /* speed gauge outline / unit */
  --t-temp:          #ef4444;   /* temp gauge outline / unit */
  --t-pass-1:        #f97316;   /* first pass */
  --t-pass-2:        #facc15;   /* 1 pass */
  --t-pass-3:        #22c55e;   /* target */
  --t-pass-4:        #4ade80;   /* acceptable */
  --t-pass-5:        #a855f7;   /* over-rolling */
}

/* =========================================================
   Semantic element styles
   ========================================================= */
.cmp-display {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--fg-1);
}
.cmp-h1 {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-transform: lowercase;
  color: var(--fg-1);
}
.cmp-h2 {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: lowercase;
  color: var(--fg-1);
}
.cmp-h3 {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  text-transform: lowercase;
  color: var(--fg-1);
}
.cmp-h4 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  text-transform: lowercase;
  color: var(--fg-1);
}
.cmp-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.cmp-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.cmp-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.cmp-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.cmp-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}
.cmp-link:hover { color: var(--c-blue-dark); }

/* On dark surfaces */
.on-dark .cmp-display,
.on-dark .cmp-h1,
.on-dark .cmp-h2,
.on-dark .cmp-h3,
.on-dark .cmp-h4,
.on-dark .cmp-body,
.on-dark .cmp-body-lg { color: var(--fg-on-dark-1); }
.on-dark .cmp-caption { color: rgba(255,255,255,0.7); }
.on-dark .cmp-eyebrow { color: var(--c-blue-bright); }