/* ============================================================================
   CLAR.iO Solutions Group — Design Tokens & Base Styles
   Import this first in any CLAR.iO artifact.

   FONTS: self-hosted brand typefaces — Bricolage Grotesque (display),
   Inter (body/UI), JetBrains Mono (code/data). Variable woff2s in fonts/.
   ============================================================================ */

@font-face {
  font-family: 'TT Interfaces';
  src: url('fonts/TTInterfaces-Bold.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2'),
       url('fonts/JetBrainsMono.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand-red:        #DA291C;   /* the single accent — from the wordmark */
  --brand-red-hover:  #B71F14;
  --brand-red-active: #97170D;
  --brand-charcoal:   #404040;   /* the wordmark gray — brand "dark"      */

  /* ---- Neutral ramp (pure/neutral gray) ------------------------------- */
  --gray-0:   #ffffff;
  --gray-50:  #f7f7f8;
  --gray-100: #efeff0;
  --gray-200: #e2e2e4;
  --gray-300: #cbcbce;
  --gray-400: #a0a0a5;
  --gray-500: #76767c;
  --gray-600: #58585d;
  --gray-700: #404040;   /* == brand charcoal */
  --gray-800: #2b2b2b;
  --gray-900: #1a1a1a;   /* primary ink */

  /* ---- Semantic color ------------------------------------------------- */
  --fg-1: var(--gray-900);   /* primary text            */
  --fg-2: var(--gray-600);   /* secondary text          */
  --fg-3: var(--gray-400);   /* tertiary / placeholder  */
  --fg-on-dark:    #ffffff;
  --fg-on-dark-2:  rgba(255,255,255,0.66);

  --bg-1: var(--gray-0);     /* primary surface         */
  --bg-2: var(--gray-50);    /* subtle alt surface      */
  --bg-3: var(--gray-100);   /* deeper alt surface      */
  --bg-dark: var(--gray-900);
  --bg-charcoal: var(--brand-charcoal);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-dark:   rgba(255,255,255,0.14);

  --accent:        var(--brand-red);
  --accent-hover:  var(--brand-red-hover);
  --accent-soft:   #FBECEA;   /* tint for red backgrounds/badges */

  /* ---- Functional / status (muted, professional) --------------------- */
  --success:    #1F8A4C;  --success-soft: #E7F4EC;
  --warning:    #B7791F;  --warning-soft: #FBF1DF;
  --error:      var(--brand-red); --error-soft: var(--accent-soft);
  --info:       #2563A8;  --info-soft:    #E8F0F8;

  /* ---- Typography ----------------------------------------------------- */
  --font-display: 'TT Interfaces', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */

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

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.12em;   /* eyebrows / kickers */

  /* ---- Spacing (8px base, 4px half-step) ------------------------------ */
  --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;
  --space-11: 160px;

  /* ---- Radii (crisp, rectilinear) ------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Elevation (low-alpha, cool-neutral; borders preferred) --------- */
  --shadow-sm: 0 1px 2px rgba(26,26,26,0.05);
  --shadow-md: 0 4px 12px rgba(26,26,26,0.08);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.12);
  --shadow-focus: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--brand-red);

  /* ---- Layout --------------------------------------------------------- */
  --container: 1200px;
  --measure: 68ch;

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
}

/* ============================================================================
   BASE / SEMANTIC ELEMENT STYLES
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 0.5em;
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--text-4xl); font-weight: var(--fw-black); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); line-height: var(--lh-snug); }
h4 { font-size: var(--text-xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }

p {
  margin: 0 0 1em;
  max-width: var(--measure);
  text-wrap: pretty;
  color: var(--fg-1);
}

a {
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-red); }

small { font-size: var(--text-sm); color: var(--fg-2); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--bg-3);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

/* ---- Utility text roles ------------------------------------------------ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}
.display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--lh-normal); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}