/* ==========================================================================
   Unlocking Tech — Design System
   colors_and_type.css

   Repositioning: AI product engineering company. Editorial, restrained,
   engineered. Closer to Linear / Vercel / Posthog than to a typical AI
   agency. Premium serious feel, never flashy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

/* Outfit — primary display + body family.
   Weights used: 300 (body), 400 (nav, captions), 500 (headings, buttons). */
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter — secondary / system family.
   Loaded from Google Fonts (no local file needed). Used for UI chrome,
   data-dense surfaces, and as fallback before Outfit loads. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ----- Color: ink + paper (foundation) ----- */
  /* Ink is the dominant text/UI color — a true near-black with a hint of warmth.
     Paper is the dominant page background — warm off-white, never pure white. */
  --ut-ink:           #0E0F0C;   /* primary text, dark surfaces, the wordmark */
  --ut-ink-2:         #1A1B17;   /* hover/elevated dark surface */
  --ut-paper:         #FDFDFB;   /* default page bg — almost white, hint of warmth */
  --ut-paper-2:       #F6F5F1;   /* tinted section bg, card on paper */
  --ut-white:         #FFFFFF;   /* pure white — used sparingly, e.g. card lift */

  /* ----- Color: neutral scale (on paper) ----- */
  --ut-neutral-900:   #1A1B17;
  --ut-neutral-800:   #2A2B26;
  --ut-neutral-700:   #44463F;   /* body text on paper */
  --ut-neutral-600:   #5C5E55;   /* secondary body */
  --ut-neutral-500:   #7A7C72;   /* muted */
  --ut-neutral-400:   #9D9E94;   /* placeholder, disabled */
  --ut-neutral-300:   #BFC0B6;   /* divider on paper-2 */
  --ut-neutral-200:   #D8D6CC;   /* hairline border on paper */
  --ut-neutral-100:   #E5E2D8;   /* subtle surface */
  --ut-neutral-50:    #EFECE3;   /* lightest tint */

  /* ----- Color: brand accent ----- */
  /* Brand blue — the signature accent. Used for primary CTAs, links,
     key emphasis. Used sparingly on paper, never as a wash. */
  --ut-blue:          #025AF8;   /* primary brand accent */
  --ut-blue-deep:     #0246C7;   /* press / hover-darken on light */
  --ut-blue-bright:   #5B82FA;   /* on-dark accent, highlight */
  --ut-blue-tint:     #DCE5FE;   /* tinted surface */
  /* Aliases — moss tokens kept as alias to blue so any in-flight components
     using --ut-moss don't break. Treat blue as canonical going forward. */
  --ut-moss:          var(--ut-blue);
  --ut-moss-deep:     var(--ut-blue-deep);
  --ut-moss-bright:   var(--ut-blue-bright);
  --ut-moss-tint:     var(--ut-blue-tint);

  /* ----- Color: secondary accent ----- */
  /* Mint — secondary brand accent. Pairs with brand blue. Used for
     highlight callouts, success surfaces, accents on dark. */
  --ut-mint:          #00DFAB;
  --ut-mint-deep:     #00B58A;
  --ut-mint-bright:   #4DEAC4;
  --ut-mint-tint:     #C8F6E8;
  /* Ochre kept as a tertiary, demoted from secondary. */
  --ut-ochre:         #B8852A;
  --ut-ochre-deep:    #8E631A;
  --ut-ochre-tint:    #EDE0C2;

  /* ----- Color: semantic ----- */
  --ut-success:       #2E7D32;   /* green */
  --ut-warning:       #B8852A;   /* ochre */
  --ut-danger:        #8B2E1F;   /* terracotta — used for errors only */
  --ut-info:          #44463F;   /* neutral, no blue */

  /* ----- Semantic foreground ----- */
  --ut-fg:            var(--ut-ink);          /* default text */
  --ut-fg-2:          var(--ut-neutral-700);  /* secondary text */
  --ut-fg-3:          var(--ut-neutral-500);  /* muted text */
  --ut-fg-on-dark:    var(--ut-paper);        /* text on ink */
  --ut-fg-on-dark-2:  #B8B6AA;                /* secondary on ink */
  --ut-fg-accent:     var(--ut-blue);         /* link / accent text */

  /* ----- Semantic surface ----- */
  --ut-bg:            var(--ut-paper);
  --ut-bg-elevated:   var(--ut-white);
  --ut-bg-muted:      var(--ut-paper-2);
  --ut-bg-dark:       var(--ut-ink);
  --ut-bg-dark-2:     var(--ut-ink-2);

  /* ----- Border ----- */
  --ut-border:        rgba(14, 15, 12, 0.10);   /* default hairline */
  --ut-border-strong: rgba(14, 15, 12, 0.22);   /* emphasized hairline */
  --ut-border-on-dark:rgba(245, 242, 236, 0.12);
  --ut-border-on-dark-strong: rgba(245, 242, 236, 0.22);

  /* ----- Type families ----- */
  /* Outfit is the primary face (display + body). Inter is the secondary,
     used for chrome/data-dense UI and as a fallback. No third family. */
  --ut-font-display:  "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ut-font-body:     "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ut-font-ui:       "Inter", "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --ut-font-mono:     "Inter", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type scale ----- */
  /* Sizes are intentionally large at the top end (display headlines) and
     restrained for body. Line-heights are tight on display, comfortable on body. */
  --ut-size-display-xl: 96px;
  --ut-size-display:    72px;
  --ut-size-h1:         56px;
  --ut-size-h2:         40px;
  --ut-size-h3:         28px;
  --ut-size-h4:         20px;
  --ut-size-eyebrow:    13px;
  --ut-size-body-lg:    19px;
  --ut-size-body:       17px;
  --ut-size-body-sm:    15px;
  --ut-size-caption:    13px;
  --ut-size-mono:       14px;

  --ut-lh-display:      1.02;
  --ut-lh-heading:      1.10;
  --ut-lh-h3:           1.20;
  --ut-lh-body:         1.55;
  --ut-lh-tight:        1.30;

  --ut-tracking-display: -0.02em;   /* tighten the big stuff */
  --ut-tracking-heading: -0.01em;
  --ut-tracking-body:    0;
  --ut-tracking-eyebrow: 0.10em;    /* uppercase eyebrows */
  --ut-tracking-mono:    0;

  /* ----- Weights ----- */
  --ut-w-light:    300;
  --ut-w-regular:  400;
  --ut-w-medium:   500;
  --ut-w-bold:     700;

  /* ----- Spacing (4px base) ----- */
  --ut-s-1:  4px;
  --ut-s-2:  8px;
  --ut-s-3:  12px;
  --ut-s-4:  16px;
  --ut-s-5:  20px;
  --ut-s-6:  24px;
  --ut-s-8:  32px;
  --ut-s-10: 40px;
  --ut-s-12: 48px;
  --ut-s-16: 64px;
  --ut-s-20: 80px;
  --ut-s-24: 96px;
  --ut-s-32: 128px;
  --ut-s-40: 160px;

  /* ----- Radii ----- */
  /* Restrained. Most things are 4–8px. Pills exist but rare. */
  --ut-r-0:    0;
  --ut-r-sm:   4px;
  --ut-r-md:   8px;
  --ut-r-lg:   12px;
  --ut-r-xl:   20px;
  --ut-r-pill: 999px;

  /* ----- Elevation ----- */
  /* No drop-shadow signature. Hairline borders do most of the work.
     Shadows, when used, are extremely subtle. */
  --ut-shadow-sm: 0 1px 2px rgba(14, 15, 12, 0.04);
  --ut-shadow-md: 0 4px 12px rgba(14, 15, 12, 0.06), 0 1px 2px rgba(14, 15, 12, 0.04);
  --ut-shadow-lg: 0 12px 32px rgba(14, 15, 12, 0.08), 0 2px 4px rgba(14, 15, 12, 0.04);

  /* ----- Motion ----- */
  --ut-dur-fast:     120ms;
  --ut-dur-base:     200ms;
  --ut-dur-slow:     360ms;
  --ut-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ut-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ut-ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ----- Layout ----- */
  --ut-container:       1200px;
  --ut-container-wide:  1320px;
  --ut-container-prose: 680px;

  /* ----- Focus ring ----- */
  --ut-focus-ring: 0 0 0 2px var(--ut-paper), 0 0 0 4px var(--ut-moss);
}

/* --------------------------------------------------------------------------
   Semantic element styles — opinionated defaults.
   Apply to a scoped root (e.g. .ut) to avoid colliding with host pages.
   -------------------------------------------------------------------------- */

.ut, .ut-root {
  font-family: var(--ut-font-body);
  font-size: var(--ut-size-body);
  line-height: var(--ut-lh-body);
  color: var(--ut-fg);
  background: var(--ut-bg);
  font-weight: var(--ut-w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ut h1, .ut .h1,
.ut h2, .ut .h2,
.ut h3, .ut .h3,
.ut h4, .ut .h4 {
  font-family: var(--ut-font-display);
  font-weight: var(--ut-w-medium);
  color: var(--ut-fg);
  margin: 0;
}

.ut .display-xl {
  font-family: var(--ut-font-display);
  font-size: var(--ut-size-display-xl);
  line-height: var(--ut-lh-display);
  letter-spacing: var(--ut-tracking-display);
  font-weight: var(--ut-w-medium);
}

.ut .display {
  font-family: var(--ut-font-display);
  font-size: var(--ut-size-display);
  line-height: var(--ut-lh-display);
  letter-spacing: var(--ut-tracking-display);
  font-weight: var(--ut-w-medium);
}

.ut h1, .ut .h1 {
  font-size: var(--ut-size-h1);
  line-height: var(--ut-lh-heading);
  letter-spacing: var(--ut-tracking-heading);
  font-weight: var(--ut-w-medium);
}

.ut h2, .ut .h2 {
  font-size: var(--ut-size-h2);
  line-height: var(--ut-lh-heading);
  letter-spacing: var(--ut-tracking-heading);
  font-weight: var(--ut-w-medium);
}

.ut h3, .ut .h3 {
  font-size: var(--ut-size-h3);
  line-height: var(--ut-lh-h3);
  letter-spacing: var(--ut-tracking-heading);
  font-weight: var(--ut-w-medium);
}

.ut h4, .ut .h4 {
  font-size: var(--ut-size-h4);
  line-height: var(--ut-lh-tight);
  font-weight: var(--ut-w-medium);
  font-family: var(--ut-font-body);   /* h4 is body-family — distinguishes display vs UI heading */
}

.ut .eyebrow {
  font-family: var(--ut-font-display);
  font-size: var(--ut-size-eyebrow);
  letter-spacing: var(--ut-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--ut-w-medium);
  color: var(--ut-fg-2);
}

.ut p, .ut .body {
  font-size: var(--ut-size-body);
  line-height: var(--ut-lh-body);
  color: var(--ut-fg);
  font-weight: var(--ut-w-regular);
  margin: 0;
}

.ut .body-lg {
  font-size: var(--ut-size-body-lg);
  line-height: var(--ut-lh-body);
}

.ut .body-sm {
  font-size: var(--ut-size-body-sm);
  line-height: var(--ut-lh-body);
}

.ut .caption {
  font-size: var(--ut-size-caption);
  line-height: var(--ut-lh-tight);
  color: var(--ut-fg-3);
}

.ut code, .ut .mono {
  font-family: var(--ut-font-mono);
  font-size: var(--ut-size-mono);
  letter-spacing: var(--ut-tracking-mono);
  font-feature-settings: "liga" 0;
}

.ut a {
  color: var(--ut-fg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(2, 90, 248, 0.4);
  transition: text-decoration-color var(--ut-dur-fast) var(--ut-ease-out),
              color var(--ut-dur-fast) var(--ut-ease-out);
}
.ut a:hover {
  text-decoration-color: var(--ut-blue);
}

.ut hr {
  border: 0;
  border-top: 1px solid var(--ut-border);
  margin: var(--ut-s-8) 0;
}

::selection {
  background: var(--ut-blue);
  color: var(--ut-paper);
}