/* AppWorks Design System — colors, type, and semantic tokens
   Source of truth: AppWorks Branding Guidelines (PDF, partner version). */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600&family=Roboto+Serif:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ——— Brand color tokens (exact from guideline) ——— */
  --aw-orange: #FF6B0F;          /* PANTONE 1585 C — primary brand */
  --aw-orange-press: #E65E00;    /* -8% for hovers/presses */
  --aw-orange-wash: #FFF1E6;     /* 10% tint for backgrounds */

  --aw-slate: #424F57;           /* Primary dark neutral */
  --aw-slate-90: #535F67;
  --aw-slate-70: #7A848B;

  --aw-grey: #75787A;            /* Mid neutral */
  --aw-grey-60: #A3A5A7;

  --aw-bone: #D1CEC1;            /* Warm off-white */
  --aw-mist: #EBECE8;            /* Lightest warm neutral */
  --aw-white: #FFFFFF;

  /* ——— Semantic color tokens ——— */
  --bg: var(--aw-white);
  --bg-alt: var(--aw-mist);
  --bg-warm: var(--aw-bone);
  --bg-inverse: var(--aw-slate);

  --fg1: var(--aw-slate);        /* primary copy on light */
  --fg2: var(--aw-grey);         /* secondary copy */
  --fg-inverse: var(--aw-white); /* copy on slate */
  --fg-muted-inverse: rgba(255,255,255,0.7);

  --accent: var(--aw-orange);
  --accent-hover: var(--aw-orange-press);

  --border: var(--aw-mist);
  --border-strong: rgba(66,79,87,0.18);
  --rule: rgba(66,79,87,0.08);

  /* ——— Type ——— */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Roboto Serif', Georgia, 'Times New Roman', serif;

  /* Type scale (pixel values for 1280px design width) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 56px;
  --text-5xl: 72px;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.12em;

  /* ——— Spacing ——— */
  --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: 120px;

  /* ——— Radii ——— */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ——— Shadows ——— */
  --shadow-sm: 0 1px 2px rgba(66,79,87,.06), 0 1px 1px rgba(66,79,87,.04);
  --shadow-md: 0 8px 24px rgba(66,79,87,.08), 0 2px 6px rgba(66,79,87,.04);

  /* ——— Motion ——— */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;

  /* ——— Layout ——— */
  --container: 1280px;
  --gutter: 24px;
  --nav-height: 72px;
}

/* ——— Semantic base styles ——— */

body, .aw-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.aw-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

.aw-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

.aw-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
  margin: 0;
}

.aw-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg1);
  margin: 0;
}

.aw-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.aw-p, p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  text-wrap: pretty;
  margin: 0;
}

.aw-lead {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg1);
  text-wrap: pretty;
}

.aw-small {
  font-size: var(--text-sm);
  color: var(--fg2);
}

.aw-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-feature-settings: 'tnum';
}

/* Batch number (AW#30) — a signature brand typographic moment */
.aw-batch {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  letter-spacing: var(--tracking-snug);
}

a, .aw-link {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover, .aw-link:hover {
  color: var(--accent-hover);
}