/* ============================================================
   AlignOM — Color & Type Tokens
   Align Opto Mechanical LLC  ·  alignom.com
   ============================================================
   Load order:
     <link rel="stylesheet" href="colors_and_type.css">
   Imports Inter (body) and Montserrat (display / banners) and
   JetBrains Mono (technical specs) from Google Fonts. Substitute
   self-hosted files in /fonts if available.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* -- Brand palette ----------------------------------------- */
  --aom-primary:        #1E3A5F;  /* deep ocean blue — headers, primary text  */
  --aom-secondary:      #5C7A8E;  /* slate blue-gray — secondary UI / nav     */
  --aom-earth-light:    #C9B79C;  /* warm sand — dividers, alt sections       */
  --aom-earth-deep:     #8B6F47;  /* terracotta clay — link hover, accent     */
  --aom-bg:             #F4F1EB;  /* bone white — page background             */
  --aom-text:           #2A2D34;  /* charcoal — body copy                     */
  --aom-accent:         #3DBED9;  /* electric cyan — CTAs, focus              */

  /* -- Tinted / functional shades ---------------------------- */
  --aom-primary-90:     #2C4972;
  --aom-primary-70:     #6781A0;
  --aom-secondary-30:   #D4DCE2;  /* slate at ~30% over bone                  */
  --aom-earth-30:       #EDE5D7;  /* sand at ~30% — zebra stripes             */
  --aom-bg-elevated:    #FBF9F4;
  --aom-line:           #5C7A8E;  /* 1px hairline rules                       */
  --aom-line-soft:      rgba(92, 122, 142, 0.25);
  --aom-accent-soft:    rgba(61, 190, 217, 0.18);
  --aom-success:        #3F8F6E;
  --aom-warning:        #C18A2E;
  --aom-danger:         #B5443A;

  /* -- Semantic foreground / background ---------------------- */
  --fg-1:               var(--aom-text);
  --fg-2:               #4A4F58;          /* muted body                       */
  --fg-3:               var(--aom-secondary);
  --fg-inverse:         var(--aom-bg);
  --fg-link:            var(--aom-primary);
  --fg-link-hover:      var(--aom-earth-deep);
  --fg-accent:          var(--aom-accent);

  --bg-page:            var(--aom-bg);
  --bg-surface:         var(--aom-bg-elevated);
  --bg-alt:             var(--aom-earth-30);
  --bg-inverse:         var(--aom-primary);

  /* -- Type ------------------------------------------------- */
  --font-sans:          "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display:       "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-h1:              56px;
  --fs-h2:              40px;
  --fs-h3:              28px;
  --fs-h4:              20px;
  --fs-h5:              17px;
  --fs-body:            17px;
  --fs-small:           14px;
  --fs-mono:            15px;
  --fs-eyebrow:         12px;

  --lh-display:         1.08;
  --lh-heading:         1.2;
  --lh-body:            1.6;
  --lh-tight:           1.3;

  --tr-display:         -0.02em;  /* tight tracking on headings              */
  --tr-eyebrow:         0.14em;   /* uppercase eyebrows                      */

  /* -- Layout primitives ------------------------------------- */
  --radius-sharp:       2px;      /* default — engineered, not pillowy        */
  --radius-pill:        999px;
  --radius-card:        2px;
  --hairline:           1px solid var(--aom-line);
  --hairline-soft:      1px solid var(--aom-line-soft);

  --shadow-1:           0 1px 0 var(--aom-line-soft);
  --shadow-2:           0 1px 2px rgba(30, 58, 95, 0.06), 0 0 0 1px var(--aom-line-soft);
  --shadow-focus:       0 0 0 2px var(--aom-accent);

  --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;

  --motion-fast:        120ms ease-out;
  --motion-base:        200ms ease-out;
  --motion-slow:        320ms ease-out;
}

/* ============================================================
   Base elements — semantic application of the tokens
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--aom-primary);
  font-weight: 600;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-weight: 600; }

p   { margin: 0 0 var(--space-4); max-width: 70ch; text-wrap: pretty; }
small { font-size: var(--fs-small); color: var(--fg-2); }

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-base), border-color var(--motion-base);
}
a:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--space-7) 0;
}

code, kbd, samp, pre, .mono, .spec {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--aom-secondary);
}

::selection { background: var(--aom-accent-soft); color: var(--aom-primary); }