/* ==========================================================================
   TechTBD — Design Tokens + Self-hosted Fonts
   Sourced from the TechTBD Design System (Brand Design Language, pp.32-38).
   Primary: Arimo (display/headlines) · Secondary: Lato (body/utility)
   ========================================================================== */

/* ---- Fonts (self-hosted TTF) -------------------------------------------- */
@font-face{font-family:"Arimo";src:url("../assets/fonts/Arimo-Regular.ttf")  format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("../assets/fonts/Arimo-Medium.ttf")   format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("../assets/fonts/Arimo-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("../assets/fonts/Arimo-Bold.ttf")     format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("../assets/fonts/Arimo-Italic.ttf")   format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Thin.ttf")     format("truetype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Light.ttf")    format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Regular.ttf")  format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Semibold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Bold.ttf")     format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Black.ttf")    format("truetype");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ---- Brand raw values ---- */
  --tbd-charcoal:#333132;   /* primary dark — the field you work in */
  --tbd-amber:#F37429;      /* the pop of color: buttons, accents */
  --tbd-cyan:#0094B4;       /* gradient light stop */
  --tbd-electric:#005BAA;   /* secondary blue */
  --tbd-royal:#153A6E;      /* deep secondary blue / gradient dark stop */
  --tbd-stone:#CED5D5;      /* cool neutral gray */

  /* ---- The signature gradient (the logo "dot") ---- */
  --tbd-gradient:radial-gradient(circle at 68% 30%, #0094B4 0%, #005BAA 46%, #153A6E 100%);
  --tbd-gradient-linear:linear-gradient(135deg, #0094B4 0%, #005BAA 52%, #153A6E 100%);

  /* ---- Neutral ramp (charcoal-tinted cool grays) ---- */
  --tbd-white:#ffffff;
  --tbd-n-50:#f7f8f8;
  --tbd-n-100:#eef0f0;
  --tbd-n-200:#e0e4e4;
  --tbd-n-300:#CED5D5;   /* = stone */
  --tbd-n-400:#a9b0b0;
  --tbd-n-500:#7c8182;
  --tbd-n-600:#585b5c;
  --tbd-n-700:#434142;
  --tbd-n-800:#333132;   /* = charcoal */
  --tbd-n-900:#211f20;
  --tbd-black:#000000;

  /* amber tints for hover/press */
  --tbd-amber-hover:#d9601f;
  --tbd-amber-soft:#fdeee3;
  --tbd-electric-hover:#004a8c;

  /* ---- Semantic aliases ---- */
  --color-text:var(--tbd-charcoal);
  --color-text-muted:var(--tbd-n-600);
  --color-text-subtle:var(--tbd-n-500);
  --color-text-inverse:var(--tbd-white);
  --color-heading:var(--tbd-charcoal);

  --surface-page:var(--tbd-white);
  --surface-raised:var(--tbd-white);
  --surface-sunken:var(--tbd-n-50);
  --surface-muted:var(--tbd-n-100);
  --surface-inverse:var(--tbd-charcoal);
  --surface-brand:var(--tbd-royal);

  --border-subtle:var(--tbd-n-200);
  --border-default:var(--tbd-n-300);
  --border-strong:var(--tbd-n-500);

  --color-accent:var(--tbd-amber);
  --color-accent-hover:var(--tbd-amber-hover);
  --color-link:var(--tbd-electric);
  --color-link-hover:var(--tbd-electric-hover);
  --color-focus:var(--tbd-electric);

  /* ---- Typography ---- */
  --font-display:"Arimo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Lato","Helvetica Neue",Arial,sans-serif;

  --fw-thin:100; --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-black:900;

  --ls-display:-0.02em;
  --ls-heading:-0.01em;
  --ls-body:0;
  --ls-loose:0.02em;
  --ls-overline:0.22em;
  --ls-label:0.02em;

  /* ---- Spacing (4px base grid) ---- */
  --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;--space-32:128px;
  --container-max:1240px;
  --gutter:32px;

  /* ---- Radius ---- */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:20px; --radius-pill:999px; --radius-circle:50%;

  /* ---- Shadows (cool, low-spread, layered) ---- */
  --shadow-xs:0 1px 2px rgba(33,31,32,.06);
  --shadow-sm:0 1px 3px rgba(33,31,32,.08),0 1px 2px rgba(33,31,32,.06);
  --shadow-md:0 4px 12px rgba(33,31,32,.08),0 2px 4px rgba(33,31,32,.06);
  --shadow-lg:0 12px 28px rgba(33,31,32,.12),0 4px 8px rgba(33,31,32,.06);
  --shadow-xl:0 24px 48px rgba(21,58,110,.16);
  --shadow-focus:0 0 0 3px rgba(0,91,170,.35);

  /* ---- Motion ---- */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
}