/* ==========================================================================
   BySidneyStoker — Colors & Type Tokens
   Organic, warm, polished. Deep earthy palette. Editorial typography.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/CormorantGaramond-Variable.woff2") format("woff2"),
       url("https://fonts.gstatic.com/s/cormorantgaramond/v16/co3YmX5slCNuHLi8bLeY9MK7whWMhyjornFLsS6V7w.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/cormorantgaramond/v16/co3RmX5slCNuHLi8bLeY9MK7whWMhyjQEJ7oFcF6jSyzdK0.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/librefranklin/v18/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJsNo.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/librefranklin/v18/jizGREVItHgc8qDIbSTKq4XkRiUa6zcZiVbJsNo.woff2") format("woff2");
}

:root {
  /* ---------- Brand color tokens (named) ---------- */
  --cream:           #F2ECE2;  /* Cream — lightest cream */
  --gentle-shadow:   #DDD0BC;  /* Gentle Shadow — cream base */
  --camel:           #AF8562;  /* Camel — warm accent */
  --beetle:          #56584C;  /* Beetle — green accent */
  --karaka:          #2E2D23;  /* Karaka — dark base */
  --coffee:          #24190E;  /* Coffee — deepest dark */

  /* Tonal expansions (computed by hand, OKLCH-balanced) */
  --cream-50:        #FBF8F2;
  --cream-100:       #F2ECE2;
  --cream-200:       #E8DFCE;
  --gentle-300:      #DDD0BC;
  --gentle-400:      #C9B89C;
  --camel-500:       #AF8562;
  --camel-600:       #8E6A4E;
  --camel-700:       #6E5239;
  --beetle-400:      #6B6D60;
  --beetle-500:      #56584C;
  --beetle-600:      #41423A;
  --karaka-700:      #3A382E;
  --karaka-800:      #2E2D23;
  --coffee-900:      #24190E;
  --coffee-950:      #1A1108;

  /* ---------- Semantic surfaces ---------- */
  --bg:              var(--cream-100);          /* default page bg */
  --bg-soft:         var(--cream-50);           /* lightest, paper */
  --bg-warm:         var(--gentle-300);         /* warm cream surface */
  --bg-inverse:      var(--karaka-800);         /* dark surfaces */
  --bg-deepest:      var(--coffee-900);         /* darkest base */

  --surface:         var(--cream-50);
  --surface-raised:  #FFFFFF;
  --surface-sunken:  var(--cream-200);

  /* ---------- Foreground / text ---------- */
  --fg:              var(--coffee-900);         /* primary text on light */
  --fg-1:            var(--coffee-900);
  --fg-2:            var(--karaka-800);         /* secondary text */
  --fg-3:            var(--beetle-500);         /* tertiary / muted */
  --fg-4:            var(--beetle-400);         /* disabled / hint */
  --fg-on-dark:      var(--cream-50);
  --fg-on-dark-2:    var(--gentle-300);

  /* ---------- Accents / brand ---------- */
  --accent:          var(--camel-500);
  --accent-hover:    var(--camel-600);
  --accent-press:    var(--camel-700);
  --accent-soft:     #E8D6C2;                    /* tinted camel for fills */

  --secondary:       var(--beetle-500);
  --secondary-hover: var(--beetle-600);

  /* ---------- Lines / borders ---------- */
  --border:          rgba(46, 45, 35, 0.14);    /* karaka @ 14% */
  --border-strong:   rgba(46, 45, 35, 0.28);
  --border-soft:     rgba(46, 45, 35, 0.08);
  --border-on-dark:  rgba(242, 236, 226, 0.14);

  /* ---------- Status (muted, on-brand) ---------- */
  --success:         #6A7A55;
  --warning:         #B5894A;
  --danger:          #8C4A3A;
  --info:            #6B7A78;

  /* ---------- Shadows (warm, soft) ---------- */
  --shadow-xs:       0 1px 2px rgba(36, 25, 14, 0.06);
  --shadow-sm:       0 2px 6px rgba(36, 25, 14, 0.08);
  --shadow-md:       0 8px 20px rgba(36, 25, 14, 0.10);
  --shadow-lg:       0 18px 40px rgba(36, 25, 14, 0.14);
  --shadow-inset:    inset 0 1px 0 rgba(242, 236, 226, 0.6);

  /* ---------- Radii ---------- */
  --radius-xs:       2px;
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       14px;
  --radius-xl:       22px;
  --radius-pill:     999px;

  /* ---------- Spacing scale (4-based) ---------- */
  --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;

  /* ---------- Type families ---------- */
  --font-serif:      "Cormorant Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans:       "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (fluid-friendly) ---------- */
  --text-xs:         12px;
  --text-sm:         14px;
  --text-base:       16px;
  --text-md:         18px;
  --text-lg:         22px;
  --text-xl:         28px;
  --text-2xl:        36px;
  --text-3xl:        48px;
  --text-4xl:        64px;
  --text-5xl:        88px;

  /* ---------- Tracking ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-eyebrow:0.18em;

  /* ---------- Leading ---------- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-loose:   1.7;

  /* ---------- Motion ---------- */
  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        140ms;
  --dur:             220ms;
  --dur-slow:        420ms;
}

/* ==========================================================================
   Semantic element styles (drop into any page that links this file)
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display, .headline {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--fg-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--text-4xl); font-weight: 500; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-2xl); font-weight: 500; }
h4 { font-size: var(--text-xl);  font-weight: 500; }
h5 { font-size: var(--text-lg);  font-weight: 500; }

.display {
  font-size: var(--text-5xl);
  font-weight: 400;
  font-style: italic;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 64ch;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

::selection {
  background: var(--camel-500);
  color: var(--cream-50);
}