/* ============================================================
   Sweet Dime Inc. — Design Tokens
   Refined sugar import & distribution. Premium / heritage / agricultural.
   ============================================================ */

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

:root {
  /* ---------- Brand Colors ---------- */
  /* Cocoa — primary brand brown, taken from the wordmark */
  --sd-cocoa-900: #2A1A0E;
  --sd-cocoa-800: #3B240F;
  --sd-cocoa-700: #4A2D14;       /* logo wordmark color */
  --sd-cocoa-600: #5C3A1C;
  --sd-cocoa-500: #6F4A28;

  /* Gold — accent, taken from the flourish lines under the wordmark */
  --sd-gold-700: #8E6A1F;
  --sd-gold-600: #A8802A;        /* flourish gold */
  --sd-gold-500: #C49A3D;
  --sd-gold-400: #D9B463;
  --sd-gold-300: #E8CB8C;
  --sd-gold-200: #F1DDB1;
  --sd-gold-100: #F8ECCF;

  /* Cane — green, from the sugarcane mark + leaves */
  --sd-cane-800: #3F5A24;
  --sd-cane-700: #547330;        /* cane leaves */
  --sd-cane-600: #6B8C3E;
  --sd-cane-500: #87A857;
  --sd-cane-300: #BFD09A;
  --sd-cane-100: #E5EBD3;

  /* Cream / Paper — the canvas */
  --sd-cream-50:  #FBF7EE;        /* logo background, page bg */
  --sd-cream-100: #F6F0E1;
  --sd-cream-200: #EFE7D2;
  --sd-cream-300: #E5DABD;

  /* Neutral ink (cooler than cocoa, for body) */
  --sd-ink-900: #1F1A14;
  --sd-ink-700: #4A3F30;
  --sd-ink-500: #7A6B55;
  --sd-ink-400: #9A8B72;
  --sd-ink-300: #BBAE96;
  --sd-ink-200: #D8CFBA;
  --sd-ink-100: #ECE4D2;

  /* Semantic */
  --sd-success: #5C7A2F;
  --sd-warning: #C49A3D;
  --sd-error:   #9C3A22;

  /* ---------- Semantic Roles ---------- */
  --sd-bg:           var(--sd-cream-50);
  --sd-bg-alt:       var(--sd-cream-100);
  --sd-bg-deep:      var(--sd-cocoa-900);
  --sd-surface:      #FFFFFF;
  --sd-surface-warm: #FCFAF3;

  --sd-fg:           var(--sd-cocoa-900);
  --sd-fg-1:         var(--sd-cocoa-800);
  --sd-fg-2:         var(--sd-ink-700);
  --sd-fg-3:         var(--sd-ink-500);
  --sd-fg-muted:     var(--sd-ink-400);
  --sd-fg-on-dark:   var(--sd-cream-50);

  --sd-accent:       var(--sd-gold-600);
  --sd-accent-soft:  var(--sd-gold-200);
  --sd-rule:         var(--sd-gold-600);

  --sd-border:        rgba(74, 45, 20, 0.14);
  --sd-border-strong: rgba(74, 45, 20, 0.28);
  --sd-border-light:  rgba(74, 45, 20, 0.08);

  /* ---------- Typography ---------- */
  --sd-font-display: 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --sd-font-serif:   'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --sd-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --sd-font-mono:    'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — display uses serif, body uses sans */
  --sd-fs-hero:   clamp(56px, 8vw, 120px);
  --sd-fs-h1:     clamp(40px, 5vw, 72px);
  --sd-fs-h2:     clamp(32px, 3.6vw, 52px);
  --sd-fs-h3:     clamp(24px, 2.4vw, 34px);
  --sd-fs-h4:     22px;
  --sd-fs-lead:   20px;
  --sd-fs-body:   16px;
  --sd-fs-small:  14px;
  --sd-fs-micro:  12px;
  --sd-fs-eyebrow: 12px;

  --sd-lh-tight:  1.05;
  --sd-lh-snug:   1.25;
  --sd-lh-body:   1.6;
  --sd-lh-loose:  1.8;

  --sd-track-tight: -0.01em;
  --sd-track-base:  0;
  --sd-track-wide:  0.08em;
  --sd-track-eyebrow: 0.22em;

  /* ---------- Spacing ---------- */
  --sd-s-1:  4px;
  --sd-s-2:  8px;
  --sd-s-3:  12px;
  --sd-s-4:  16px;
  --sd-s-5:  24px;
  --sd-s-6:  32px;
  --sd-s-7:  48px;
  --sd-s-8:  64px;
  --sd-s-9:  96px;
  --sd-s-10: 128px;

  /* ---------- Radius ---------- */
  --sd-r-xs: 2px;
  --sd-r-sm: 4px;
  --sd-r-md: 6px;
  --sd-r-lg: 12px;
  --sd-r-xl: 20px;
  --sd-r-pill: 999px;

  /* ---------- Shadows / Elevation ---------- */
  /* Sweet Dime is a "paper" brand — shadows are soft, warm, and short. */
  --sd-shadow-paper: 0 1px 0 rgba(74, 45, 20, 0.04), 0 1px 2px rgba(74, 45, 20, 0.06);
  --sd-shadow-card:  0 1px 2px rgba(74, 45, 20, 0.06), 0 8px 24px -12px rgba(74, 45, 20, 0.18);
  --sd-shadow-lift:  0 4px 8px -2px rgba(74, 45, 20, 0.08), 0 24px 48px -16px rgba(74, 45, 20, 0.24);
  --sd-shadow-deep:  0 32px 64px -24px rgba(31, 26, 20, 0.45);
  --sd-inset-letterpress: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(74,45,20,0.06);

  /* ---------- Motion ---------- */
  --sd-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --sd-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --sd-dur-fast:    160ms;
  --sd-dur-base:    260ms;
  --sd-dur-slow:    520ms;

  /* ---------- Layout ---------- */
  --sd-max-w:        1280px;
  --sd-max-w-narrow: 880px;
  --sd-max-w-prose:  640px;
  --sd-gutter:       clamp(20px, 4vw, 56px);
}

/* ============================================================
   Semantic element styles — apply by class .sd
   ============================================================ */

.sd, .sd * { box-sizing: border-box; }
.sd {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-body);
  line-height: var(--sd-lh-body);
  color: var(--sd-fg);
  background: var(--sd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sd-display, .sd-h1, .sd-h2, .sd-h3, .sd-h4 {
  font-family: var(--sd-font-display);
  color: var(--sd-fg);
  font-weight: 500;
  letter-spacing: var(--sd-track-tight);
  line-height: var(--sd-lh-tight);
  margin: 0;
  text-wrap: balance;
}

.sd-display { font-size: var(--sd-fs-hero); font-weight: 500; }
.sd-h1      { font-size: var(--sd-fs-h1); }
.sd-h2      { font-size: var(--sd-fs-h2); }
.sd-h3      { font-size: var(--sd-fs-h3); line-height: var(--sd-lh-snug); }
.sd-h4      { font-size: var(--sd-fs-h4); line-height: var(--sd-lh-snug); font-weight: 600; }

.sd-display em, .sd-h1 em, .sd-h2 em, .sd-h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--sd-cocoa-700);
}

.sd-eyebrow {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--sd-track-eyebrow);
  text-transform: uppercase;
  color: var(--sd-gold-700);
  margin: 0;
}

.sd-lead {
  font-size: var(--sd-fs-lead);
  line-height: var(--sd-lh-body);
  color: var(--sd-fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

.sd-p, .sd p {
  font-size: var(--sd-fs-body);
  line-height: var(--sd-lh-body);
  color: var(--sd-fg-2);
  margin: 0 0 1em;
  text-wrap: pretty;
}

.sd-small { font-size: var(--sd-fs-small); color: var(--sd-fg-3); }
.sd-micro { font-size: var(--sd-fs-micro); color: var(--sd-fg-muted); letter-spacing: 0.04em; }

/* The Sweet Dime "flourish rule" — gold line with serif dot accent */
.sd-flourish {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sd-gold-600);
}
.sd-flourish::before, .sd-flourish::after {
  content: "";
  width: 36px; height: 1px;
  background: currentColor;
}
.sd-flourish > span { font-size: 6px; }