/* ==========================================================================
   Autosite Design System — colors_and_type.css
   Pastel, sober, credible. Built for BIM / survey / AEC technology.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Ubuntu:wght@300;400;500;700&display=swap');

:root {
  /* ======================================================================
     COLOR TOKENS
     A muted, pastel palette anchored by a deep "blueprint" navy and a
     terracotta accent. Pastels are used for surfaces and states; deeper
     neutrals carry type and structure to keep the system sober and credible.
     ====================================================================== */

  /* --- Brand primitives --- */
  --as-ink:              #1A2332;   /* blueprint navy — primary brand ink */
  --as-ink-soft:         #2C3A4F;
  --as-paper:            #FAF7F2;   /* warm paper white — primary surface */
  --as-paper-soft:       #F2EDE4;   /* secondary surface */

  /* --- Pastel palette (primary use for surfaces, tags, states) --- */
  --as-sky:              #CFDCE6;   /* pastel blue — primary accent surface */
  --as-sky-soft:         #E4ECF2;
  --as-sky-deep:         #6B8AA3;   /* readable on paper */

  --as-sage:             #CBD6C4;   /* pastel sage — success / nature */
  --as-sage-soft:        #E2E9DD;
  --as-sage-deep:        #6E8265;

  --as-terracotta:       #D9A796;   /* pastel terracotta — warmth / brand accent */
  --as-terracotta-soft: #EBD2C7;
  --as-terracotta-deep: #9B5E49;

  --as-sand:             #E4D7C0;   /* pastel sand — neutral warm */
  --as-sand-soft:        #EFE7D6;
  --as-sand-deep:        #8A7658;

  --as-mist:             #D6D8DC;   /* pastel grey-blue */
  --as-mist-soft:        #E9EAEC;

  /* --- Neutrals (type + borders) --- */
  --as-n-900:            #1A2332;   /* = ink */
  --as-n-800:            #2C3A4F;
  --as-n-700:            #475468;
  --as-n-600:            #6B7687;
  --as-n-500:            #8E97A5;
  --as-n-400:            #B4BAC4;
  --as-n-300:            #D3D7DE;
  --as-n-200:            #E6E8EC;
  --as-n-100:            #F1F2F5;
  --as-n-50:             #F8F8FA;
  --as-n-0:              #FFFFFF;

  /* --- Semantic roles --- */
  --fg-1:                var(--as-ink);          /* primary text */
  --fg-2:                var(--as-n-700);        /* secondary text */
  --fg-3:                var(--as-n-600);        /* tertiary / captions */
  --fg-muted:            var(--as-n-500);
  --fg-inverse:          var(--as-paper);

  --bg-1:                var(--as-paper);        /* primary surface */
  --bg-2:                var(--as-paper-soft);   /* secondary surface */
  --bg-3:                var(--as-n-100);
  --bg-inverse:          var(--as-ink);

  --brand-primary:       var(--as-ink);          /* bold brand action */
  --brand-accent:        var(--as-terracotta-deep);
  --brand-accent-soft:   var(--as-terracotta-soft);
  --brand-surface:       var(--as-sky-soft);

  --border-1:            var(--as-n-300);        /* default border */
  --border-2:            var(--as-n-200);        /* subtle divider */
  --border-strong:       var(--as-n-700);

  --success-fg:          #4C6B3F;
  --success-bg:          var(--as-sage-soft);
  --warning-fg:          #8A6A2C;
  --warning-bg:          #F2E6C7;
  --danger-fg:           #8A3A2C;
  --danger-bg:           #F0D4CA;
  --info-fg:             var(--as-sky-deep);
  --info-bg:             var(--as-sky-soft);

  --focus-ring:          rgba(26, 35, 50, 0.35);

  /* ======================================================================
     TYPOGRAPHY
     Roboto = primary (UI, body, headings)
     Ubuntu = secondary (captions, labels, eyebrows, data)
     ====================================================================== */

  --font-primary:   'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Ubuntu', 'Trebuchet MS', sans-serif;
  --font-mono:      'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale — 1.25 (major third), anchored at 16 */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-caps:     0.12em;

  /* ======================================================================
     SPACING, RADIUS, ELEVATION, MOTION
     ====================================================================== */

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

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26, 35, 50, 0.06), 0 1px 1px rgba(26, 35, 50, 0.04);
  --shadow-2: 0 2px 6px rgba(26, 35, 50, 0.08), 0 1px 2px rgba(26, 35, 50, 0.05);
  --shadow-3: 0 8px 24px rgba(26, 35, 50, 0.10), 0 2px 6px rgba(26, 35, 50, 0.06);
  --shadow-4: 0 20px 48px rgba(26, 35, 50, 0.14), 0 4px 12px rgba(26, 35, 50, 0.08);
  --shadow-inset: inset 0 1px 2px rgba(26, 35, 50, 0.08);

  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-soft:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ==========================================================================
   BASE ELEMENT STYLES — semantic defaults bound to the tokens above
   ========================================================================== */

html {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

/* Headings — Roboto, tight leading, subtle negative tracking on display */
h1, .h1 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h5, .h5 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h6, .h6 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Eyebrow — Ubuntu, wide caps, used above titles on marketing + slides */
.eyebrow {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--brand-accent);
}

p {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  font-weight: 300;
}

small, .caption {
  font-family: var(--font-secondary);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

/* Labels — Ubuntu, denser, used on forms + data tables */
.label, label {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: var(--fs-14);
  color: var(--fg-2);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a {
  color: var(--brand-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.75; }

hr {
  border: 0;
  border-top: 1px solid var(--border-2);
  margin: var(--space-5) 0;
}