/* Dooralysis brand tokens — palette C, deep teal-ink + green-teal + amber.
   Drop this in and use the variables; never hardcode a brand colour in a page. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;700&display=swap');

:root{
  /* base */
  --ink:        #0A1F2B;   /* hero + nav background, headings on light */
  --ink-tile:   #123243;   /* logo tile, raised surfaces on ink */
  --ink-soft:   #93AFBC;   /* secondary text on ink */
  --on-ink:     #EAF6FA;   /* primary text on ink */

  /* accents */
  --green:      #2DD4A7;   /* primary action, on-ink accent */
  --green-deep: #0E8C6E;   /* same accent, legible on light backgrounds */
  --green-tint: #A8EFDA;   /* badges, pills */
  --amber:      #FFB020;   /* secondary accent, warnings, the peak bar */
  --amber-tint: #FFE2A8;

  /* light surfaces */
  --bg:         #EDF6F8;   /* page background */
  --surface:    #FFFFFF;   /* cards */
  --line:       #D5E6EB;   /* borders */
  --body:       #5C6F77;   /* body copy on light */

  /* type */
  --font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
}

/* Type scale — the size and tightness are as much of the brand as the colour. */
h1{ font-size:44px; line-height:1.08; letter-spacing:-.035em; font-weight:700 }
h2{ font-size:30px; line-height:1.15; letter-spacing:-.03em;  font-weight:700 }
h3{ font-size:19px; line-height:1.25; letter-spacing:-.02em;  font-weight:700 }
body{ font-family:var(--font); font-size:16px; line-height:1.6; color:var(--body); background:var(--bg) }

/* On smaller screens the hero headline must not overflow. */
@media (max-width:640px){ h1{ font-size:32px } h2{ font-size:24px } }