/* ============================================================
   GoodSip — Colors & Type
   ============================================================ */

/* Inter is loaded via Google Fonts in HTML <head>:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
*/

:root {
  /* -------- Color — Raw brand -------- */
  --gs-bg:            #F5EFE6;  /* warm cream canvas */
  --gs-primary:       #6F4E37;  /* espresso */
  --gs-secondary:     #E6D5C3;  /* oat milk */
  --gs-accent:        #A67C52;  /* caramel */
  --gs-text:          #2B2B2B;  /* near-black */
  --gs-text-muted:    #7A7A7A;  /* stone */

  /* -------- Derived tonal steps (for hover/press/borders) -------- */
  --gs-primary-900:   #4A3422;
  --gs-primary-700:   #5C4029;
  --gs-primary-600:   #6F4E37; /* = primary */
  --gs-primary-500:   #8A6547;
  --gs-primary-300:   #B89B82;
  --gs-primary-100:   #EADBCB;

  --gs-surface:       #FFFFFF;         /* elevated card */
  --gs-surface-2:     #FBF7F1;         /* subtle surface */
  --gs-surface-sunk:  #EFE7DB;         /* inset / field */
  --gs-border:        #E3D5C2;         /* hairline on cream */
  --gs-border-strong: #C9B49C;

  /* -------- Semantic -------- */
  --gs-success: #6B8E5A;   /* matcha */
  --gs-warning: #C89B3C;   /* honey */
  --gs-danger:  #B4553B;   /* terracotta */
  --gs-info:    #6F8C9B;   /* steamy blue-gray */

  /* Foreground roles */
  --fg-1: var(--gs-text);         /* primary copy */
  --fg-2: var(--gs-text-muted);   /* secondary copy */
  --fg-3: #A39A8E;                 /* tertiary / hints */
  --fg-on-primary: #FBF7F1;        /* text on espresso */
  --fg-on-accent:  #FFFFFF;

  /* Background roles */
  --bg-1: var(--gs-bg);
  --bg-2: var(--gs-surface);
  --bg-3: var(--gs-surface-2);
  --bg-sunk: var(--gs-surface-sunk);

  /* -------- Type — raw -------- */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (fluid-ish, tuned for a calm reading rhythm) */
  --fs-display: 44px;
  --fs-h1:      32px;
  --fs-h2:      24px;
  --fs-h3:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* -------- Spacing (4-based) -------- */
  --sp-0:  0px;
  --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;

  /* -------- Radii (everything rounded) -------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* -------- Shadows — soft and warm -------- */
  --shadow-xs: 0 1px 2px rgba(74, 52, 34, 0.04);
  --shadow-sm: 0 2px 6px rgba(74, 52, 34, 0.06), 0 1px 2px rgba(74, 52, 34, 0.04);
  --shadow-md: 0 6px 20px rgba(74, 52, 34, 0.08), 0 2px 6px rgba(74, 52, 34, 0.04);
  --shadow-lg: 0 16px 40px rgba(74, 52, 34, 0.10), 0 4px 10px rgba(74, 52, 34, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(74, 52, 34, 0.06);
  --ring-focus: 0 0 0 3px rgba(166, 124, 82, 0.28);

  /* -------- Motion — calm, satisfying -------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);     /* spring-ish */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */

  /* -------- Semantic type roles -------- */
  --type-display: var(--fw-semibold) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --type-h1:      var(--fw-semibold) var(--fs-h1)/var(--lh-snug) var(--font-sans);
  --type-h2:      var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  --type-h3:      var(--fw-medium)   var(--fs-h3)/var(--lh-snug) var(--font-sans);
  --type-body:    var(--fw-regular)  var(--fs-body)/var(--lh-normal) var(--font-sans);
  --type-small:   var(--fw-regular)  var(--fs-small)/var(--lh-normal) var(--font-sans);
  --type-label:   var(--fw-medium)   var(--fs-small)/var(--lh-snug) var(--font-sans);
  --type-caps:    var(--fw-semibold) var(--fs-micro)/1.2 var(--font-sans);
}

/* ---------- Base elements ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: var(--tracking-snug);
}

h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); margin: 0; }
h3 { font: var(--type-h3); letter-spacing: var(--tracking-snug); margin: 0; }
p  { margin: 0; color: var(--fg-1); }
small { font: var(--type-small); color: var(--fg-2); }

.display {
  font: var(--type-display);
  letter-spacing: var(--tracking-tight);
}
.caps {
  font: var(--type-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.muted { color: var(--fg-2); }
.hint  { color: var(--fg-3); }