/* ============================================================
   AusMotion — Colors & Type tokens
   Source of truth for both base tokens and semantic tokens.
   ============================================================ */

/* -------- Web fonts (Inter + JetBrains Mono via Google Fonts)
   NOTE: brief called for Inter / Söhne / General Sans (display) +
   Inter / system (body) + JetBrains Mono / IBM Plex Mono (mono).
   We ship Inter + JetBrains Mono. Söhne and General Sans are
   licensed foundry faces — not substituted; flagged to the user.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* =======================
     COLOR — base palette
     ======================= */

  /* Primary — navy, authority / tech / trust (brightened per review) */
  --color-navy-950: #0f1e3d;
  --color-navy-900: #1b2f5c;
  --color-navy-800: #2d4b90;   /* PRIMARY — royal navy */
  --color-navy-700: #3a5aa6;
  --color-navy-600: #4e6fbb;
  --color-navy-500: #6e8acd;

  /* Warm accent — outback orange */
  --color-outback-700: #b85420;
  --color-outback-600: #d4652e;
  --color-outback-500: #e8753d;   /* ACCENT WARM */
  --color-outback-400: #ee9264;
  --color-outback-300: #f4b08f;
  --color-outback-100: #fbe4d6;

  /* Cool accent — steel blue */
  --color-steel-700: #2c4e67;
  --color-steel-600: #355a78;
  --color-steel-500: #3e6b8c;     /* ACCENT COOL */
  --color-steel-400: #628aa5;
  --color-steel-300: #8baabf;
  --color-steel-100: #dde6ee;

  /* Neutrals — full grayscale ramp */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafbfc;   /* near-white */
  --color-neutral-100: #f3f5f8;
  --color-neutral-200: #e6eaf0;
  --color-neutral-300: #d2d8e0;
  --color-neutral-400: #aab3bf;
  --color-neutral-500: #7b8593;
  --color-neutral-600: #56606e;
  --color-neutral-700: #3a424d;
  --color-neutral-800: #232932;
  --color-neutral-900: #121721;
  --color-neutral-950: #0a0f1a;   /* near-black (matches navy-900) */

  /* Semantic — muted, professional (not bright) */
  --color-success-700: #1e6b47;
  --color-success-500: #2e8b5f;
  --color-success-100: #e0efe7;

  --color-warning-700: #8a5a10;
  --color-warning-500: #b8781a;
  --color-warning-100: #f5e8d0;

  --color-danger-700: #8e2c2c;
  --color-danger-500: #b53b3b;
  --color-danger-100: #f4dadb;

  --color-info-700: #2c4e67;
  --color-info-500: #3e6b8c;
  --color-info-100: #dde6ee;

  /* =======================
     COLOR — semantic tokens
     ======================= */
  --bg-page:        var(--color-neutral-50);
  --bg-surface:     var(--color-neutral-0);
  --bg-subtle:      var(--color-neutral-100);
  --bg-muted:       var(--color-neutral-200);
  --bg-inverse:     var(--color-navy-800);
  --bg-inverse-deep:var(--color-navy-900);

  --fg-default:     var(--color-neutral-900);
  --fg-strong:      var(--color-navy-900);
  --fg-muted:       var(--color-neutral-600);
  --fg-subtle:      var(--color-neutral-500);
  --fg-on-inverse:  var(--color-neutral-50);
  --fg-on-accent:   var(--color-neutral-0);

  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --border-inverse: var(--color-navy-700);
  --border-focus:   var(--color-outback-500);

  --accent-warm:    var(--color-outback-500);
  --accent-warm-hover: var(--color-outback-600);
  --accent-cool:    var(--color-steel-500);
  --accent-cool-hover: var(--color-steel-600);

  --link:           var(--color-steel-600);
  --link-hover:     var(--color-steel-700);

  /* =======================
     TYPE — font stacks
     ======================= */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE — size scale (fluid-ish; tuned for 1440 primary) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;   /* body base */
  --text-lg:  18px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-7xl: 76px;

  /* TYPE — line heights */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;     /* body */
  --lh-loose:    1.75;

  /* TYPE — weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* TYPE — letter spacing
     Tighter on large display per brief.                  */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;   /* ALL-CAPS eyebrows */

  /* =======================
     SPACING — 4px base
     ======================= */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* =======================
     RADIUS — subtle, industrial
     ======================= */
  --radius-sharp:  0;       /* technical / data elements */
  --radius-xs:     2px;
  --radius-sm:     4px;     /* buttons, inputs */
  --radius-md:     8px;     /* cards */
  --radius-lg:     12px;    /* modal, large surfaces */
  --radius-pill:   999px;   /* badges, chips only */

  /* =======================
     SHADOW / ELEVATION — understated
     ======================= */
  --shadow-xs: 0 1px 2px rgba(10, 15, 26, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 15, 26, 0.06), 0 1px 2px rgba(10, 15, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 15, 26, 0.08), 0 1px 3px rgba(10, 15, 26, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 15, 26, 0.12), 0 2px 6px rgba(10, 15, 26, 0.04);
  --shadow-xl: 0 24px 60px rgba(10, 15, 26, 0.18), 0 4px 12px rgba(10, 15, 26, 0.06);
  --shadow-focus: 0 0 0 3px rgba(232, 117, 61, 0.35);   /* outback glow */

  /* =======================
     MOTION — restrained
     ======================= */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-instant:   80ms;
  --dur-fast:      140ms;
  --dur-base:      220ms;
  --dur-slow:      360ms;

  /* =======================
     LAYOUT
     ======================= */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-3xl: 1600px;
  --gutter:       24px;
}

/* ============================================================
   Semantic element styles — use as a base reset
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-6xl); font-weight: var(--fw-bold);     letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-4xl); font-weight: var(--fw-semibold);  letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); }
h4 { font-size: var(--text-xl);  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--text-lg);  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }
h6 {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p {
  margin: 0 0 var(--space-4);
  max-width: 70ch;
}

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

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}

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

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

::selection {
  background: var(--color-outback-500);
  color: var(--color-neutral-0);
}

/* Utility: eyebrow (all-caps label) */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-warm);
}

/* Utility: tech caption (mono) */
.tech-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  text-transform: uppercase;
}