/* ============================================================
   ASTERIC — Color & Typography Foundations
   Source: AST1857 Asteric Brand Concepts (Concept 1, April 2016)
   ============================================================ */

/* --- Web fonts (Google Fonts substitutions; see README) --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800&family=Nunito:wght@300;400;500;600;700&display=swap');

:root {
  /* ============== BRAND COLORS (Concept 1) ============== */
  /* Primary mark color — the loop / asterisk glyph */
  --asteric-blue:        #3399cc;  /* PMS 7688 C */
  /* Wordmark color — primary text & dark surfaces */
  --asteric-navy:        #183242;  /* PMS 7546 C */
  /* Supporting accent palette (from style sheet) */
  --asteric-red:         #da2032;  /* PMS 186 C */
  --asteric-purple:      #80408d;  /* PMS 258 C */
  --asteric-magenta:     #d31773;  /* PMS 186 C (dup) */
  --asteric-gold:        #fcaf17;  /* PMS 1235 C */

  /* ============== NEUTRAL SCALE ==============
     Built around the navy. Tinted neutrals — never pure grey —
     so surfaces feel related to the brand. */
  --navy-950: #0d1c26;
  --navy-900: #142a37;
  --navy-800: #183242;   /* = brand navy */
  --navy-700: #2c4555;
  --navy-600: #486070;
  --navy-500: #6c8190;
  --navy-400: #94a5b1;
  --navy-300: #b9c4cc;
  --navy-200: #dbe1e6;
  --navy-100: #ecf0f3;
  --navy-50:  #f5f7f9;
  --white:    #ffffff;

  /* ============== BLUE SCALE (mark color extended) ============== */
  --blue-700: #1f5e80;
  --blue-600: #2a7daa;
  --blue-500: #3399cc;   /* = brand blue */
  --blue-400: #66b3d8;
  --blue-300: #99cce4;
  --blue-200: #cce6f1;
  --blue-100: #e6f3f8;

  /* ============== SEMANTIC TOKENS ============== */
  /* Backgrounds */
  --bg-canvas:    var(--white);
  --bg-subtle:    var(--navy-50);
  --bg-muted:     var(--navy-100);
  --bg-inverse:   var(--navy-800);
  --bg-inverse-2: var(--navy-900);

  /* Foregrounds (text & icons) */
  --fg-primary:   var(--navy-800);   /* default body */
  --fg-secondary: var(--navy-600);
  --fg-tertiary:  var(--navy-500);
  --fg-muted:     var(--navy-400);
  --fg-on-dark:   var(--white);
  --fg-on-dark-2: var(--navy-200);
  --fg-accent:    var(--blue-500);
  --fg-link:      var(--blue-600);

  /* Borders / dividers */
  --border-subtle:   var(--navy-100);
  --border-default:  var(--navy-200);
  --border-strong:   var(--navy-300);
  --border-inverse:  var(--navy-700);

  /* Status (uses brand accents intentionally — keeps the family) */
  --success:        #2c8c5c;
  --success-bg:     #e8f4ee;
  --warning:        var(--asteric-gold);
  --warning-bg:     #fff5dd;
  --danger:         var(--asteric-red);
  --danger-bg:      #fce8ea;
  --info:           var(--blue-500);
  --info-bg:        var(--blue-100);

  /* ============== TYPOGRAPHY ============== */
  /* Original spec: Web Font Proxima Nova, Print Apple SD Gothic Neo.
     Substitutes: Nunito Sans (close geometric sans w/ open terminals),
     Nunito (rounded — matches the wordmark's friendly geometry). */
  --font-display: "Nunito", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Nunito Sans", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale (1.250 major-third) — anchor 16px */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter-spacing — wordmark is geometric and slightly open; mirror that
     in display copy with subtle negative tracking on big sizes. */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.14em;   /* uppercase eyebrows */

  /* ============== SPACING SCALE (4px base) ============== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============== RADII ============== */
  /* The brand mark is built from rounded loops — radii skew generous. */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* ============== ELEVATION ============== */
  /* Soft, navy-tinted shadows — never neutral-grey. */
  --shadow-xs:  0 1px 2px rgba(24, 50, 66, 0.06);
  --shadow-sm:  0 2px 4px rgba(24, 50, 66, 0.06), 0 1px 2px rgba(24, 50, 66, 0.04);
  --shadow-md:  0 4px 12px rgba(24, 50, 66, 0.08), 0 2px 4px rgba(24, 50, 66, 0.04);
  --shadow-lg:  0 12px 32px rgba(24, 50, 66, 0.10), 0 4px 8px rgba(24, 50, 66, 0.04);
  --shadow-xl:  0 24px 60px rgba(24, 50, 66, 0.14), 0 8px 16px rgba(24, 50, 66, 0.04);
  --shadow-focus: 0 0 0 3px rgba(51, 153, 204, 0.35);

  /* ============== MOTION ============== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.8, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these instead of raw font-size where possible.
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

/* Element defaults */
body { font-family: var(--font-body); color: var(--fg-primary); background: var(--bg-canvas); }
h1 { font: 400 var(--fs-48)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
h2 { font: 400 var(--fs-36)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-snug); }
h3 { font: 500 var(--fs-24)/var(--lh-snug) var(--font-display); }
h4 { font: 600 var(--fs-20)/var(--lh-snug) var(--font-display); }
p  { font-size: var(--fs-16); line-height: var(--lh-normal); }
small { font-size: var(--fs-14); color: var(--fg-secondary); }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-muted); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }