/* Columbia Kitchen site: token variables for ds/columbiakitchen/components/bundle.css, plus site helpers. */
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); }

.ck-root {
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: Figtree, "Segoe UI", system-ui, sans-serif;
  --surface-100: #fbf5e9; --surface-200: #f3ead6; --surface-raised: #ffffff;
  --ink: #22301f; --ink-muted: #56604c; --line: #e3d8bf; --border-strong: #7d846f;
  --garden-green: #3f7d3a; --garden-green-hover: #346a30; --on-green: #fbf5e9;
  --tomato: #b93a24; --on-tomato: #fbf5e9; --tomato-bright: #d2462f;
  --golden: #f2b632; --on-golden: #22301f; --carrot: #e9812b; --on-carrot: #22301f;
  --sprout: #e5f0dc; --sprout-text: #2c5c28; --blush: #fbe5de; --blush-text: #9c2f1c;
  --butter: #fcefc7; --leaf: #a8d58a; --focus: #c7621a;
  --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;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(34,48,31,0.06), 0 6px 18px rgba(34,48,31,0.08);
  --shadow-lift: 0 2px 4px rgba(34,48,31,0.08), 0 14px 32px rgba(34,48,31,0.14);
  --footer-bg: #3f7d3a; --footer-ink: #fbf5e9;
  min-height: 100vh;
}
.ck-root[data-theme="dark"] {
  --surface-100: #161b14; --surface-200: #1c2219; --surface-raised: #20271d;
  --ink: #f4eedf; --ink-muted: #b4b8a5; --line: #33402e; --border-strong: #7f8a74;
  --garden-green: #8cc47e; --garden-green-hover: #a3d396; --on-green: #12200f;
  --tomato: #f08a74; --on-tomato: #1a0f0c; --tomato-bright: #e5634b;
  --carrot: #f4a05b; --on-carrot: #1a0f0c;
  --sprout: #243520; --sprout-text: #cfe8c2; --blush: #3a2019; --blush-text: #f6c7ba;
  --butter: #3a3218; --focus: #f4a05b;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,0.45), 0 14px 32px rgba(0,0,0,0.45);
  --footer-bg: #1c2219; --footer-ink: #f4eedf;
}
.ck-root a:focus-visible, .ck-root button:focus-visible, .ck-root input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Illustration panels (flat produce-palette art, built like the mark). Swap for photography later:
   each panel keeps its shot description in a hidden .ck-photo__label. */
.ck-photo { position: relative; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line);
  box-sizing: border-box; background: #f3ead6 url("../images/bowl-a.svg") center / cover no-repeat; }
.ck-photo__label { display: none; }
.ck-ill--a { background-image: url("../images/bowl-a.svg"); }
.ck-ill--b { background-image: url("../images/bowl-b.svg"); }
.ck-ill--c { background-image: url("../images/bowl-c.svg"); }
.ck-ill--table { background-image: url("../images/table.svg"); }
.ck-ill--produce { background-image: url("../images/produce.svg"); }
.ck-ill--bag { background-image: url("../images/bag.svg"); }

.ck-foot-link { color: var(--footer-ink); text-decoration: none; font-size: 15px; line-height: 24px; }
.ck-foot-link:hover { text-decoration: underline; }
.ck-link { color: var(--garden-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Phone layout (≤640px): 16px gutters, space-8-ish section padding, display-lg hero, nav as a scrolling row. */
@media (max-width: 640px) {
  .ck-root > section, .ck-root > footer { padding: 56px 16px !important; }
  .ck-root > section[style*="padding: 0 "] { padding-top: 0 !important; }
  .ck-root .ck-header { padding: 12px 16px; gap: 12px; }
  .ck-root .ck-header img { height: 40px; }
  .ck-root .ck-nav { order: 3; width: 100%; gap: 20px; flex-wrap: nowrap !important; overflow-x: auto; }
  .ck-root .ck-nav a { white-space: nowrap; }
  .ck-root h1[style*="64px"] { font-size: 48px !important; line-height: 54px !important; }
  .ck-root h1[style*="48px"] { font-size: 36px !important; line-height: 42px !important; }
  .ck-root h2[style*="36px"], .ck-root .ck-h { font-size: 28px !important; line-height: 34px !important; }
  .ck-root .ck-lede { font-size: 16px; line-height: 24px; }
  .ck-root [style*="gap: 64px"] { gap: 32px !important; }
  .ck-root .ck-photo[style*="height: 520px"], .ck-root .ck-photo[style*="height: 480px"], .ck-root .ck-photo[style*="height: 440px"] { height: 260px !important; flex-basis: auto !important; }
  .ck-root [style*="padding: 64px 48px"] { padding: 40px 24px !important; }
  .ck-root .ck-card[style*="padding: 32px"] { padding: 24px !important; }
}