/* ============================================================
   DESIGN TOKENS — "Surge Orange" Theme
   ------------------------------------------------------------
   Palette translated from Surge AI (surgehq.ai)
   Original purple accent: #9747FF -> Orange accent: #F54E00
   Body font: DM Sans 400
   UI/Heading font: Geist 600
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --bg:                     #FAF9F5;   /* page background (warm beige) */
  --surface:                #FFFFFF;   /* cards / elevated surfaces   */

  /* ---------- Text ---------- */
  --text-body:              #33332C;   /* body copy (warm olive-grey)  */
  --text-heading:           #1D1D18;   /* headings, nav, strong text   */
  --text-on-accent:         #FFFFFF;   /* text on solid accent fills   */

  /* ---------- Accent ---------- */
  --accent:                 #F54E00;   /* icons, links, button text/border */
  --accent-hover:           #D94400;   /* hover state                      */
  --accent-active:          #BF3B00;   /* active / pressed state           */
  --accent-fill:            #FEE9E0;   /* tonal button background          */
  --accent-fill-hover:      #FDD7C7;   /* tonal button hover               */
  --accent-fill-active:     #FBC5AE;   /* tonal button active              */

  /* ---------- Selection ---------- */
  --selection-bg:           #FFC9A8;   /* text selection background */
  --selection-fg:           #1D1D18;   /* text selection foreground */

  /* ---------- Typography ---------- */
  --font-body:              'DM Sans', system-ui, sans-serif;
  --font-heading:           'Geist', system-ui, sans-serif;
  --font-ui:                'Geist', system-ui, sans-serif;

  --weight-body:            400;       /* DM Sans regular  */
  --weight-ui:              600;       /* Geist semibold   */

  /* ---------- Radius ---------- */
  --radius-sm:              6px;
  --radius-md:              10px;
  --radius-lg:              16px;
}


/* ============================================================
   BASE
   ============================================================ */

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   TYPOGRAPHY
   Rule: body copy = DM Sans 400. Everything else = Geist 600.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-weight: var(--weight-ui);
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 { font-size: 64px; line-height: 1.05; }
h2 { font-size: 44px; line-height: 1.10; }
h3 { font-size: 30px; line-height: 1.20; }
h4 { font-size: 22px; line-height: 1.30; }

p {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 1em;
}

p.lead {
  font-size: 19px;
  line-height: 1.6;
}


/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--accent);
  font-family: var(--font-ui);
  font-weight: var(--weight-ui);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
a:active {
  color: var(--accent-active);
}


/* ============================================================
   NAV
   ============================================================ */

nav,
nav a {
  font-family: var(--font-ui);
  font-weight: var(--weight-ui);
  font-size: 15px;
  line-height: 1;
}

nav a {
  color: var(--text-heading);
}
nav a:hover {
  color: var(--accent);
  text-decoration: none;
}


/* ============================================================
   BUTTONS
   ============================================================ */

button,
.btn {
  font-family: var(--font-ui);
  font-weight: var(--weight-ui);
  font-size: 15px;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* ----- Primary (solid accent) ----- */
.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-primary:active {
  background: var(--accent-active);
  border-color: var(--accent-active);
}

/* ----- Secondary (tonal — the Surge pattern) ----- */
.btn-secondary {
  background: var(--accent-fill);
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent-fill-hover);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-secondary:active {
  background: var(--accent-fill-active);
  color: var(--accent-active);
  border-color: var(--accent-active);
}

/* ----- Ghost / text button ----- */
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
}
.btn-ghost:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}


/* ============================================================
   CARDS / SURFACES
   ============================================================ */

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */

label,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-weight: var(--weight-ui);
  font-size: 14px;
}

input,
select,
textarea {
  color: var(--text-body);
  background: var(--surface);
  border: 1.5px solid #E5E3DC;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}


/* ============================================================
   SMALL / CAPTION / UI TEXT
   ============================================================ */

small,
figcaption,
caption,
.label,
.caption {
  font-family: var(--font-ui);
  font-weight: var(--weight-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-heading);
}


/* ============================================================
   TEXT SELECTION
   ============================================================ */

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}
::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}