/* ============================================================
   AXIOM SOLUTIONS — Design Tokens
   Colors, type, spacing, radii, shadows.
   Import as the single source of truth across all surfaces.
   ============================================================ */

/* Webfonts ---------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ----- Brand ----- */
  --axiom-navy:        #0B1B3B;   /* primary; institutional */
  --axiom-navy-deep:   #060F25;   /* near-black navy, hero backgrounds */
  --axiom-navy-700:    #16264C;
  --axiom-navy-600:    #1F3260;
  --axiom-navy-500:    #2C4378;
  --axiom-navy-300:    #6E7FA6;
  --axiom-navy-100:    #C8D0E0;

  --axiom-gold:        #B4963C;   /* accent; muted bronze gold */
  --axiom-gold-deep:   #8C7124;
  --axiom-gold-soft:   #D9C079;
  --axiom-gold-pale:   #F1E6BD;

  /* ----- Neutrals (warm bone family) ----- */
  --bone-50:           #FFFFFF;
  --bone-75:           #FBF9F3;
  --bone-100:          #F7F4ED;   /* canonical paper */
  --bone-150:          #EFEBDF;
  --bone-200:          #E4DFCE;
  --bone-300:          #C9C3AE;
  --bone-400:          #9C9683;
  --ink-700:           #2A2D33;
  --ink-800:           #1A1C22;
  --ink-900:           #0E0F13;

  /* ----- Semantic state ----- */
  --signal-positive:   #2F7D4E;   /* verified, on-track */
  --signal-warning:    #B07514;   /* attention */
  --signal-critical:   #9A2A2A;   /* breach, alert */
  --signal-info:       #1F4A8C;

  /* ----- Surfaces ----- */
  --surface-paper:     var(--bone-100);
  --surface-card:      var(--bone-50);
  --surface-inset:     var(--bone-150);
  --surface-night:     var(--axiom-navy-deep);
  --surface-night-2:   var(--axiom-navy);

  /* ----- Foreground ----- */
  --fg-1:              var(--axiom-navy);   /* primary text */
  --fg-2:              #3B4663;             /* secondary */
  --fg-3:              #6B7691;             /* tertiary, captions */
  --fg-on-dark-1:      #F4F1E8;
  --fg-on-dark-2:      #B9C0D4;
  --fg-accent:         var(--axiom-gold);

  /* ----- Borders ----- */
  --border-hairline:   rgba(11, 27, 59, 0.10);
  --border-line:       rgba(11, 27, 59, 0.18);
  --border-strong:     rgba(11, 27, 59, 0.32);
  --border-on-dark:    rgba(244, 241, 232, 0.14);
  --border-gold:       rgba(180, 150, 60, 0.55);

  /* ----- Shadows ----- */
  --shadow-xs:  0 1px 0 rgba(11,27,59,0.04), 0 1px 2px rgba(11,27,59,0.04);
  --shadow-sm:  0 1px 0 rgba(11,27,59,0.04), 0 2px 6px rgba(11,27,59,0.06);
  --shadow-md:  0 1px 0 rgba(11,27,59,0.04), 0 8px 24px -8px rgba(11,27,59,0.16);
  --shadow-lg:  0 2px 0 rgba(11,27,59,0.04), 0 24px 56px -20px rgba(11,27,59,0.28);
  --shadow-inset-line: inset 0 0 0 1px rgba(11,27,59,0.08);

  /* ----- Radii (restrained — institutional) ----- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ----- Spacing scale (4px base) ----- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ----- Type families ----- */
  --font-display: "Saira Semi Condensed", "Saira", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ----- Type scale ----- */
  --t-display:  clamp(48px, 6vw, 84px);
  --t-h1:       40px;
  --t-h2:       30px;
  --t-h3:       22px;
  --t-h4:       17px;
  --t-body:     16px;
  --t-small:    14px;
  --t-caption:  12px;
  --t-eyebrow:  11px;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ----- Layout ----- */
  --container-max: 1240px;
  --gutter:        24px;
}

/* ============================================================
   Semantic element styles — opt in by adding the class or
   applying directly via type composition.
   ============================================================ */

.axiom-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.axiom-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.axiom-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--fg-1); }
.axiom-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg-1); }
.axiom-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; color: var(--fg-1); }
.axiom-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--t-h4); line-height: 1.3; color: var(--fg-1); }

.axiom-body  { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-loose); color: var(--fg-1); }
.axiom-lede  { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--fg-2); }
.axiom-small { font-family: var(--font-body); font-weight: 400; font-size: var(--t-small); line-height: var(--lh-normal); color: var(--fg-2); }
.axiom-caption { font-family: var(--font-body); font-size: var(--t-caption); line-height: 1.4; letter-spacing: 0.02em; color: var(--fg-3); text-transform: uppercase; }
.axiom-mono   { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; color: var(--fg-1); }

/* Rule lines — used heavily as dividers */
.axiom-rule       { border: 0; border-top: 1px solid var(--border-line); }
.axiom-rule-gold  { border: 0; border-top: 1px solid var(--axiom-gold); }
.axiom-rule-thick { border: 0; border-top: 2px solid var(--fg-1); }

/* Buttons (reference implementation) */
.axiom-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.axiom-btn-primary  { background: var(--axiom-navy); color: var(--bone-50); }
.axiom-btn-primary:hover  { background: var(--axiom-navy-700); }
.axiom-btn-primary:active { transform: translateY(1px); }
.axiom-btn-secondary { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.axiom-btn-secondary:hover { border-color: var(--axiom-navy); background: var(--bone-75); }
.axiom-btn-gold      { background: var(--axiom-gold); color: var(--axiom-navy-deep); }
.axiom-btn-gold:hover{ background: var(--axiom-gold-deep); color: var(--bone-50); }
.axiom-btn-ghost     { background: transparent; color: var(--fg-1); }
.axiom-btn-ghost:hover{ background: rgba(11,27,59,0.06); }

/* Cards */
.axiom-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Selection */
::selection { background: var(--axiom-gold-pale); color: var(--axiom-navy-deep); }