/* =========================================================================
   Uprise Chiropractic — Design Tokens
   Ocean Teal + Champagne Gold palette with layered Sora typography.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap');

:root {
  /* --- Ocean Teal palette ---------------------------------------- */
  --primary:         #1F5E5E;   /* Ocean Teal — DOMINANT */
  --primary-dark:    #1A5454;   /* Deep Ocean */
  --primary-light:   #226666;   /* Light Ocean */

  --teal-900:        #133E3E;   /* deepest — for footer */
  --teal-800:        #1A5454;   /* deep ocean */
  --teal-700:        #1F5E5E;   /* PRIMARY Ocean Teal */
  --teal-600:        #226666;   /* light ocean / hover */
  --teal-500:        #2A7878;
  --teal-400:        #3E8E8E;
  --teal-300:        #6BA8A8;
  --teal-200:        #A0C7C7;
  --teal-100:        #CFE0E0;
  --teal-50:         #EAF1F1;

  /* Champagne Gold accents */
  --accent:          #E0B968;   /* Champagne Gold */
  --accent-dark:     #C9952B;   /* Deep Gold */
  --gold:            #E0B968;
  --gold-deep:       #C9952B;
  --gold-soft:       #EBCE93;
  --gold-wash:       #F5E6C2;

  /* Ink — deep charcoal */
  --text:            #2D3739;
  --text-muted:      #6B7378;
  --ink:             #2D3739;
  --ink-soft:        #525B5E;
  --ink-mute:        #6B7378;

  /* Surfaces */
  --white:           #FFFFFF;
  --cream:           #F7F3ED;   /* Warm Cream */
  --cream-soft:      #F5EFE3;   /* Soft Cream */
  --paper:           #FFFFFF;
  --bone:            #D9D2C8;
  --bone-soft:       #E8E4DE;

  /* Semantic */
  --success:         #2A7878;
  --warn:            #C9952B;
  --error:           #A8442E;
  --error-wash:      #F2D5CC;

  /* --- Backward-compat aliases ------------------------------------ */
  --eucalyptus-900:  var(--teal-900);
  --eucalyptus-800:  var(--teal-800);
  --eucalyptus-700:  var(--teal-700);
  --eucalyptus-600:  var(--teal-600);
  --eucalyptus-500:  var(--teal-500);
  --eucalyptus-400:  var(--teal-400);
  --eucalyptus-300:  var(--teal-300);
  --eucalyptus-200:  var(--teal-200);
  --eucalyptus-100:  var(--teal-100);
  --eucalyptus-50:   var(--teal-50);
  --clay:            var(--gold);
  --clay-deep:       var(--gold-deep);
  --clay-soft:       var(--gold-soft);
  --clay-wash:       var(--gold-wash);

  /* --- Semantic ---------------------------------------------------- */
  --bg:              var(--cream);
  --bg-elevated:     var(--paper);
  --bg-inverse:      var(--teal-700);
  --bg-deep:         var(--teal-900);

  --fg:              var(--ink);
  --fg-soft:         var(--ink-soft);
  --fg-mute:         var(--ink-mute);
  --fg-inverse:      var(--cream);
  --fg-accent:       var(--teal-700);

  --border:          var(--bone);
  --border-strong:   #D2C5A2;
  --border-focus:    var(--teal-600);

  --link:            var(--teal-700);
  --link-hover:      var(--teal-900);

  /* --- Typography — Sora layered system ---------------------------- */
  --font:            'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display:    'Sora', system-ui, sans-serif;
  --font-serif:      'Sora', system-ui, sans-serif;      /* aliased — single-font system */
  --font-sans:       'Sora', system-ui, sans-serif;
  --font-mono:       'Sora', ui-monospace, monospace;

  /* Type scale (per spec) */
  --text-xs:         12px;
  --text-sm:         14px;
  --text-base:       16px;
  --text-md:         18px;
  --text-lg:         21px;
  --text-xl:         26px;
  --text-2xl:        32px;
  --text-3xl:        40px;
  --text-4xl:        56px;
  --text-5xl:        72px;
  --text-6xl:        96px;

  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.5;
  --lh-relaxed:      1.6;
  --lh-loose:        1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;
  --tracking-cinzel: 0.3em;

  /* --- Spacing (4px grid) ------------------------------------------ */
  --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-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       24px;
  --radius-xl:       40px;
  --radius-pill:     999px;

  /* --- Shadows ----------------------------------------------------- */
  --shadow-1:        0 1px 2px rgba(19,62,62,0.05), 0 2px 6px rgba(19,62,62,0.06);
  --shadow-2:        0 8px 24px rgba(19,62,62,0.12), 0 2px 6px rgba(19,62,62,0.08);
  --shadow-focus:    0 0 0 2px var(--cream), 0 0 0 4px var(--teal-600);

  /* --- Motion ------------------------------------------------------ */
  --ease-rise:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   150ms;
  --duration-base:   240ms;
  --duration-slow:   360ms;

  /* --- Layout ------------------------------------------------------ */
  --container-narrow: 680px;
  --container:        1200px;
  --container-wide:   1440px;
  --header-height:    80px;
}

/* =========================================================================
   Base elements
   ========================================================================= */

html {
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

/* Headings — Sora bold */
.display, h1, h2 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); font-weight: 700; }
h2 { font-size: var(--text-2xl); line-height: var(--lh-snug); font-weight: 700; }

.cinzel, .wordmark {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}

h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
}

h3 { font-size: var(--text-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--text-md); line-height: var(--lh-snug); }
h5 { font-size: var(--text-base); line-height: var(--lh-snug); }
h6 {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
}

p {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

small, .caption {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-mute);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-rise);
}
a:hover { color: var(--link-hover); }

strong { font-weight: 700; color: var(--text); }

/* Italics now meaningful — light italic 300 is part of layered system */
em, i { font-style: italic; font-weight: 300; font-family: var(--font); }

code, kbd, samp {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--bone-soft);
  border-radius: var(--radius-sm);
  padding: 0.12em 0.36em;
}

blockquote {
  font-family: var(--font);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--text);
  border-left: 2px solid var(--gold);
  margin: 0;
  padding-left: var(--space-5);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

/* Utility — eyebrow label per spec */
.eyebrow {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}

.overline {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--fg-mute);
}

/* Layered headline helper */
.h-italic-light {
  font-family: var(--font);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
}