/* =========================================================
   A Light in the Sky — Design Tokens
   Geometric. Quiet. Precise.
   ========================================================= */

/* Fonts: Sora — modern geometric sans-serif. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOR — Deep Teal (primary brand) ---------- */
  --deep-teal-900: #051a23;
  --deep-teal-800: #082f3c;
  --deep-teal-700: #0E4858;   /* PRIMARY — Deep Teal */
  --deep-teal-600: #146477;
  --deep-teal-500: #137F8E;   /* Mid teal-cyan */
  --deep-teal-300: #7ab7c2;
  --deep-teal-100: #cce4e8;
  --deep-teal-50:  #eef6f8;   /* SURFACE */

  /* ---------- COLOR — Cyan (highlight) ---------- */
  --cyan-700: #0e8aa0;
  --cyan-500: #1aa9c1;
  --cyan-400: #3FC1D4;     /* HIGHLIGHT — Bright Cyan */
  --cyan-300: #7fd6e3;
  --cyan-100: #d6f0f5;

  /* ---------- COLOR — Ember (accent — used sparingly) ---------- */
  --ember-900: #6a1f06;
  --ember-700: #B5360D;
  --ember-600: #DC4413;    /* ACCENT — Vivid Orange */
  --ember-500: #e6633a;
  --ember-300: #f1a486;
  --ember-100: #fbe2d7;

  /* ---------- COLOR — Ink (cyan-tinted neutrals, derived from the brand palette) ---------- */
  --ink-900: #0B2030;      /* deep midnight navy — from palette */
  --ink-800: #143040;
  --ink-700: #2d4856;
  --ink-500: #5d7382;
  --ink-300: #9bb0bb;
  --ink-200: #c4d2da;
  --ink-100: #e0e8ed;
  --ink-50:  #f0f5f7;
  --paper:   #FFFFFF;      /* BACKGROUND */

  /* ---------- COLOR — Semantic ---------- */
  --success: #1f7a4d;
  --warning: #b4731a;
  --danger:  var(--ember-700);
  --info:    var(--deep-teal-500);

  /* ---------- COLOR — Roles ---------- */
  --bg:           var(--paper);
  --bg-surface:   var(--deep-teal-50);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-300);
  --fg-inverse:   var(--paper);
  --fg-brand:     var(--deep-teal-700);

  --border:       var(--ink-100);
  --border-strong:var(--ink-200);
  --border-brand: var(--deep-teal-300);

  --accent:       var(--deep-teal-700);
  --accent-2:     var(--ember-600);
  --accent-cool:  var(--cyan-400);

  /* ---------- Back-compat aliases (so existing components keep working) ---------- */
  --teal-900: var(--deep-teal-900);
  --teal-800: var(--deep-teal-800);
  --teal-700: var(--deep-teal-700);
  --teal-600: var(--deep-teal-600);
  --teal-500: var(--deep-teal-500);
  --teal-300: var(--deep-teal-300);
  --teal-100: var(--deep-teal-100);
  --teal-50:  var(--deep-teal-50);

  /* ---------- TYPE — Families ---------- */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-body:    'Sora', ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE — Scale (modular ~1.250) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ---------- 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: 128px;

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ---------- BORDER WIDTHS ---------- */
  --bw-hairline: 1px;
  --bw-regular:  1.5px;
  --bw-bold:     2px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 32, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 32, 48, 0.07), 0 1px 2px rgba(11, 32, 48, 0.04);
  --shadow-md: 0 6px 20px rgba(11, 32, 48, 0.09), 0 2px 6px rgba(11, 32, 48, 0.04);
  --shadow-lg: 0 18px 40px rgba(11, 32, 48, 0.12), 0 4px 12px rgba(11, 32, 48, 0.05);
  --shadow-focus: 0 0 0 3px rgba(14, 72, 88, 0.28);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1280px;
  --gutter:           24px;
}

/* =========================================================
   Semantic typography
   ========================================================= */

body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-56), 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-light);
  color: var(--fg);
}

h1, .h1 { font-family: var(--font-display); font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-regular); color: var(--fg); }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-40); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: var(--weight-regular); color: var(--fg); }
h3, .h3 { font-family: var(--font-display); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: var(--weight-medium); color: var(--fg); }
h4, .h4 { font-family: var(--font-display); font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: var(--weight-medium); color: var(--fg); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
}

p, .body { font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg); text-wrap: pretty; }
.body-lg, .lede { font-size: var(--fs-20); line-height: var(--lh-normal); color: var(--fg); font-weight: var(--weight-regular); }
.body-sm, small { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-muted); }
.caption { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-muted); letter-spacing: var(--tracking-snug); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--deep-teal-50);
  color: var(--deep-teal-800);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

a {
  color: var(--fg-brand);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--deep-teal-800); }