/* =============================================================
   VegYolk — Design Tokens
   Single source of truth for color, type, spacing, radii, shadows.
   ============================================================= */

@import url('./fonts/fonts.css');

:root {
  /* ---------- Color ---------- */

  /* Yolk — hero color, the yellow */
  --yolk-50:  #FEF6DE;
  --yolk-100: #FCEAB0;
  --yolk-300: #F7CE6E;
  --yolk-500: #F4B43A;   /* hero */
  --yolk-700: #C8861E;
  --yolk-900: #7A5210;

  /* Shell — cream backgrounds */
  --shell-50:  #FBF3DF;  /* page bg */
  --shell-100: #F5E9CB;  /* raised cards */
  --shell-200: #ECDCB1;
  --paper:     #FFFBF1;  /* lightest surface */

  /* Moong — plant signal green */
  --moong-50:  #EEF3E1;
  --moong-300: #BCD089;
  --moong-500: #86A85B;
  --moong-700: #4F6B33;
  --moong-900: #2D3E1B;

  /* Cooked — recipe / fried tone */
  --cooked-300: #ECA37A;
  --cooked-500: #D26B3A;
  --cooked-700: #9A4720;

  /* Ink — warm near-black for text */
  --ink-900: #1F1812;
  --ink-700: #3A2F25;
  --ink-500: #6B5E51;
  --ink-300: #A89C8E;
  --ink-100: #D8CFC2;

  /* Semantic */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-300);
  --fg-inverse: var(--paper);
  --fg-accent: var(--yolk-700);
  --fg-plant: var(--moong-700);

  --bg-1: var(--shell-50);
  --bg-2: var(--paper);
  --bg-3: var(--shell-100);
  --bg-plant: var(--moong-500);
  --bg-yolk: var(--yolk-500);
  --bg-ink: var(--ink-900);

  --border-soft: rgba(31, 24, 18, 0.10);
  --border-strong: rgba(31, 24, 18, 0.22);

  --focus-ring: 0 0 0 3px rgba(244, 180, 58, 0.45);

  /* ---------- Type ---------- */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Manrope', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid where it matters */
  --t-display-xl: clamp(56px, 8vw, 112px);
  --t-display-lg: clamp(44px, 6vw, 80px);
  --t-display-md: clamp(36px, 4.5vw, 56px);
  --t-h1: clamp(32px, 3.5vw, 44px);
  --t-h2: clamp(24px, 2.5vw, 32px);
  --t-h3: 20px;
  --t-h4: 17px;
  --t-body: 16px;
  --t-body-sm: 14px;
  --t-caption: 13px;
  --t-overline: 12px;

  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.55;

  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-body: 0;
  --tracking-overline: 0.12em;

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

  /* ---------- Radii ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(31,24,18,0.06), 0 2px 8px rgba(31,24,18,0.04);
  --shadow-2: 0 4px 10px rgba(31,24,18,0.08), 0 12px 30px rgba(31,24,18,0.06);
  --shadow-pop: 0 8px 24px rgba(31,24,18,0.12), 0 24px 60px rgba(31,24,18,0.10);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 480ms;
}

/* =============================================================
   Semantic element styles — use these via class names below.
   Don't restyle <h1>, etc., directly; use these classes for clarity.
   ============================================================= */

.vy-display-xl,
.vy-display-lg,
.vy-display-md {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}
.vy-display-xl { font-size: var(--t-display-xl); }
.vy-display-lg { font-size: var(--t-display-lg); }
.vy-display-md { font-size: var(--t-display-md); }

.vy-h1, .vy-h2, .vy-h3, .vy-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  text-wrap: balance;
}
.vy-h1 { font-size: var(--t-h1); }
.vy-h2 { font-size: var(--t-h2); }
.vy-h3 { font-size: var(--t-h3); font-weight: 600; }
.vy-h4 { font-size: var(--t-h4); font-weight: 600; }

.vy-serif-flourish {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.vy-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  font-weight: 400;
}
.vy-body-sm {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.vy-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg-2);
}
.vy-overline {
  font-family: var(--font-body);
  font-size: var(--t-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-2);
}
.vy-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* =============================================================
   Components — primitive styles you can compose.
   ============================================================= */

.vy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.vy-btn:active { transform: scale(0.97); }
.vy-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.vy-btn--primary {
  background: var(--ink-900);
  color: var(--paper);
}
.vy-btn--primary:hover { background: #000; }

.vy-btn--yolk {
  background: var(--yolk-500);
  color: var(--ink-900);
}
.vy-btn--yolk:hover { background: var(--yolk-700); color: var(--paper); }

.vy-btn--ghost {
  background: transparent;
  color: var(--ink-900);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.vy-btn--ghost:hover { background: rgba(31,24,18,0.06); }

.vy-btn--plant {
  background: var(--moong-700);
  color: var(--paper);
}
.vy-btn--plant:hover { background: var(--moong-900); }

.vy-card {
  background: var(--shell-100);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.vy-input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--paper);
  color: var(--ink-900);
  transition: border var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.vy-input:focus {
  outline: none;
  border-color: var(--yolk-500);
  box-shadow: var(--focus-ring);
}

.vy-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--shell-100);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}
.vy-tag--plant { background: var(--moong-50); color: var(--moong-700); }
.vy-tag--yolk { background: var(--yolk-100); color: var(--yolk-900); }
.vy-tag--ink { background: var(--ink-900); color: var(--paper); }

/* =============================================================
   Page baseline
   ============================================================= */

.vy-page {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}