/* =========================================================
   Capy Brew — Colors & Type Tokens
   A warm, rounded, coffee-focused palette.
   ========================================================= */

/* --- Fonts --------------------------------------------------
   Display: Fraunces (closest Google Fonts match to the chunky, friendly
   retro serif used in the wordmark — flagged as a substitution;
   ideally swap for the actual wordmark typeface when available).
   Body:    Nunito (warm, rounded humanist sans — matches the soft geometry).
   Mono:    JetBrains Mono (neutral, warm-gray mono for code/specs).
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,500&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     COLOR — Brand
     Extracted from the Capy Brew logo.
     ========================================================= */
  --brand-espresso:     #3E2418;   /* darkest — wordmark, headline text */
  --brand-coffee:       #5A321E;   /* deep brown — outlines, strong accents */
  --brand-cinnamon:     #A05A33;   /* capybara body — primary brand accent */
  --brand-caramel:      #C88B5C;   /* light tan — highlights, secondary */
  --brand-latte:        #E8D2B8;   /* creamy mid-tone */
  --brand-oatmilk:      #F4E9DA;   /* warm cream — surfaces */
  --brand-cream:        #FBF6EE;   /* app background */
  --brand-leaf:         #6B7A4A;   /* olive — from the leaf garnish, sparingly */

  /* =========================================================
     COLOR — Neutrals (warm-tinted, not pure gray)
     ========================================================= */
  --warm-50:   #FBF6EE;
  --warm-100:  #F4E9DA;
  --warm-200:  #E8D2B8;
  --warm-300:  #D4B38E;
  --warm-400:  #B08864;
  --warm-500:  #8B6246;
  --warm-600:  #6C4A33;
  --warm-700:  #4E3423;
  --warm-800:  #3E2418;
  --warm-900:  #2A170E;

  /* =========================================================
     COLOR — Semantic foregrounds & backgrounds
     ========================================================= */
  --bg:           var(--brand-cream);       /* app background */
  --bg-raised:    #FFFFFF;                  /* cards / elevated surfaces */
  --bg-sunken:    var(--brand-oatmilk);     /* input fields, wells */
  --bg-inverse:   var(--brand-espresso);

  --fg1:          var(--brand-espresso);    /* primary text */
  --fg2:          var(--warm-600);          /* secondary text */
  --fg3:          var(--warm-500);          /* tertiary / muted */
  --fg-inverse:   var(--brand-cream);       /* on dark bg */
  --fg-on-brand:  #FFFFFF;                  /* on cinnamon/coffee bg */

  --border:       #E6D6BF;                  /* default hairline */
  --border-strong:#C9AE8A;
  --divider:      #EED9BE;

  --accent:       var(--brand-cinnamon);    /* primary accent */
  --accent-hover: #8E4E2C;
  --accent-press: #7A4326;
  --accent-soft:  #F3DFCB;                  /* tinted fill for accent bg */

  /* Semantic status — all warm-tinted to stay on-brand */
  --success:      #5E7A3F;
  --success-soft: #E4ECD4;
  --warning:      #C78A2C;
  --warning-soft: #F7E6C4;
  --danger:       #B04A30;
  --danger-soft:  #F3D6CA;
  --info:         #5A7A84;
  --info-soft:    #D9E4E6;

  /* =========================================================
     TYPE — Families & scale
     ========================================================= */
  --font-display: 'Fraunces', 'Recoleta', 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', ui-rounded, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Sizes (rem-based, 16px root) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.12em;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* =========================================================
     RADII — generously rounded, pill-friendly
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — soft, warm, low-contrast
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(62, 36, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(62, 36, 24, 0.08);
  --shadow-md: 0 6px 16px rgba(62, 36, 24, 0.10);
  --shadow-lg: 0 14px 32px rgba(62, 36, 24, 0.12);
  --shadow-xl: 0 24px 56px rgba(62, 36, 24, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(62, 36, 24, 0.08);

  /* Focus ring — accessible, warm */
  --ring: 0 0 0 3px rgba(160, 90, 51, 0.35);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =========================================================
   SEMANTIC TYPE ROLES
   Use these classes on real HTML so pages stay consistent.
   ========================================================= */

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

.display-xl,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg1);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
}

.body-sm, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-cinnamon);
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--warm-700);
}

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