/* ============================================================
   Astryx Advisory — Color & Type Foundations
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Public+Sans:ital,wght@0,300..800;1,300..800&family=Saira:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- BRAND PALETTE ---------- */
  --brand-navy:        #0D1B2A;
  --brand-accent:      #8CCB2E;
  --brand-white:       #FFFFFF;

  /* Navy scale */
  --navy-950: #060d16;
  --navy-900: #0d1b2a;
  --navy-800: #142336;
  --navy-700: #1c3047;
  --navy-600: #2a4360;
  --navy-500: #3d5a7d;
  --navy-400: #6b82a3;
  --navy-300: #9aabc4;
  --navy-200: #c8d2e0;
  --navy-100: #e6ebf2;
  --navy-50:  #f4f6fa;

  /* Accent scale */
  --accent-700: #4f8a13;
  --accent-600: #66af1c;
  --accent-500: #8CCB2E;
  --accent-400: #9add4d;
  --accent-300: #b8e780;
  --accent-200: #d8f1b3;
  --accent-100: #ecf8d9;

  /* Neutrals */
  --paper:   #fbfbfa;
  --bone:    #f4f3ef;
  --ink:     #0d1b2a;
  --mute:    #586a7e;
  --hairline:#e3e6ec;
  --rule:    #cfd5de;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg-page:      var(--paper);
  --bg-surface:   var(--brand-white);
  --bg-sunken:    var(--bone);
  --bg-inverse:   var(--brand-navy);

  --fg-primary:   var(--ink);
  --fg-secondary: var(--mute);
  --fg-tertiary:  var(--navy-400);
  --fg-on-dark:   var(--brand-white);
  --fg-on-dark-2: var(--navy-200);
  --fg-accent:    var(--accent-700);

  --border-subtle:  var(--hairline);
  --border-default: var(--rule);
  --border-strong:  var(--navy-300);

  --signal-success: #2f7d3a;
  --signal-warning: #b8860b;
  --signal-danger:  #b3261e;
  --signal-info:    var(--navy-600);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:    "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-serif);
  --font-ui:      var(--font-sans);

  /* ---------- TYPE SCALE ---------- */
  --t-eyebrow:   0.75rem;
  --t-micro:     0.8125rem;
  --t-small:     0.875rem;
  --t-body:      1rem;
  --t-lead:      1.125rem;
  --t-h6:        1.125rem;
  --t-h5:        1.25rem;
  --t-h4:        1.5rem;
  --t-h3:        1.875rem;
  --t-h2:        2.5rem;
  --t-h1:        3.25rem;
  --t-display:   4.5rem;
  --t-display-lg:5.75rem;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.16em;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* ---------- SPACING ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10:64px; --s-11:80px; --s-12:104px;
  --s-13:128px;--s-14:160px;

  /* ---------- RADII ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-hairline: 0 0 0 1px var(--hairline);
  --shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06), 0 2px 6px rgba(13, 27, 42, 0.05);
  --shadow-md: 0 2px 4px rgba(13, 27, 42, 0.06), 0 8px 20px rgba(13, 27, 42, 0.07);
  --shadow-lg: 0 4px 10px rgba(13, 27, 42, 0.07), 0 24px 48px rgba(13, 27, 42, 0.10);
  --shadow-inset: inset 0 0 0 1px rgba(13, 27, 42, 0.06);

  --focus-ring: 0 0 0 3px rgba(140, 203, 46, 0.35), 0 0 0 1px var(--brand-navy);

  /* ---------- LAYOUT ---------- */
  --container-narrow: 760px;
  --container-prose:  920px;
  --container:        1200px;
  --container-wide:   1400px;
  --gutter:           clamp(20px, 4vw, 48px);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

html { font-size: 16px; }
body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 380; }
h2 { font-size: var(--t-h2); font-weight: 400; letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--t-h3); font-weight: 420; line-height: var(--lh-snug); }
h4 { font-size: var(--t-h4); font-weight: 500; font-family: var(--font-ui); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--t-h5); font-weight: 600; font-family: var(--font-ui); }
h6 { font-size: var(--t-h6); font-weight: 600; font-family: var(--font-ui); }

p { margin: 0; line-height: var(--lh-relaxed); text-wrap: pretty; max-width: 68ch; }

a {
  color: var(--fg-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--navy-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration-color: var(--brand-navy); }

small, .t-small { font-size: var(--t-small); line-height: var(--lh-normal); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.t-display    { font-family: var(--font-display); font-size: var(--t-display); font-weight: 360; line-height: 1.02; letter-spacing: -0.02em; }
.t-display-lg { font-family: var(--font-display); font-size: var(--t-display-lg); font-weight: 360; line-height: 1.0; letter-spacing: -0.025em; }
.t-lead       { font-size: var(--t-lead); line-height: var(--lh-relaxed); color: var(--fg-secondary); max-width: 60ch; }
.t-eyebrow    {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-secondary);
}
.t-eyebrow--accent { color: var(--accent-700); }
.t-mono       { font-family: var(--font-mono); font-size: var(--t-small); letter-spacing: 0; }

::selection { background: var(--brand-navy); color: var(--brand-white); }