/* Generated by tools/build.mjs — edit tokens/*.css, not this file. */

/* ===== tokens/fonts.css ================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Jost:ital,wght@0,300;0,400;0,500;1,400&display=swap');
/* Klay's real wordmark is set in a high-contrast Didone serif. No font binaries were
   provided, so Playfair Display stands in for it (SUBSTITUTION — see readme.md).
   Jost stands in for the quiet geometric sans used for supporting text. */

/* ===== tokens/colors.css ================================================ */
:root{
/* --- Base ramp: paper & clay ------------------------------------------- */
--klay-paper:#F7F4EE;          /* logo background, page base */
--klay-paper-warm:#F1ECE3;     /* card / section tint */
--klay-bisque:#E4DACD;         /* unglazed clay, light */
--klay-clay-100:#DCC7B2;
--klay-clay-200:#C9A886;       /* the three vases */
--klay-clay-300:#B08A66;       /* terracotta, primary accent */
--klay-clay-400:#8C6A4B;
--klay-ink:#1F1D1B;            /* logo line + type */
--klay-ink-70:#4A4642;
--klay-ink-45:#7A746C;
--klay-ink-20:#C4BEB4;
--klay-greige:#CFCCC2;         /* studio wall */
--klay-greige-light:#E7E4DB;
--klay-sage:#A9AE9E;           /* dried-plant green */
--klay-celadon:#A7C2C0;        /* pale glaze blue */
--klay-glow:#E9C89B;           /* warm shelf lighting */
--klay-white:#FFFFFF;

/* --- Semantic: surfaces ----------------------------------------------- */
--surface-page:var(--klay-paper);
--surface-raised:var(--klay-white);
--surface-card:var(--klay-paper-warm);
--surface-sunken:var(--klay-bisque);
--surface-inverse:var(--klay-ink);
--surface-accent:var(--klay-clay-300);
--surface-accent-soft:var(--klay-clay-100);
--surface-overlay:rgba(31,29,27,.42);

/* --- Semantic: text --------------------------------------------------- */
--text-display:var(--klay-ink);
--text-body:var(--klay-ink-70);
--text-muted:var(--klay-ink-45);
--text-on-inverse:var(--klay-paper);
--text-on-accent:var(--klay-paper);
--text-accent:var(--klay-clay-400);
--text-link:var(--klay-clay-400);
--text-link-hover:var(--klay-ink);

/* --- Semantic: lines -------------------------------------------------- */
--line-hairline:rgba(31,29,27,.14);
--line-strong:var(--klay-ink);
--line-accent:var(--klay-clay-300);
--line-inverse:rgba(247,244,238,.28);

/* --- Semantic: status (kept quiet, clay-family) ----------------------- */
--status-open:#7C8A6B;         /* studio open / seat free */
--status-open-soft:#E4E7DC;
--status-waitlist:var(--klay-clay-300);
--status-waitlist-soft:#F0E4D7;
--status-closed:var(--klay-ink-45);
--status-closed-soft:var(--klay-greige-light);
--status-error:#9C5A46;
--status-error-soft:#F2E1DA;
}

/* ===== tokens/typography.css ============================================ */
:root{
--font-display:'Playfair Display',Georgia,'Times New Roman',serif;
--font-body:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif;
--font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;

/* Type scale — display steps are generous, body steps are quiet */
--text-hero:clamp(3rem,7vw,5.5rem);   /* 88px */
--text-h1:3.25rem;   /* 52 */
--text-h2:2.25rem;   /* 36 */
--text-h3:1.5rem;    /* 24 */
--text-h4:1.1875rem; /* 19 */
--text-lead:1.3125rem;/* 21 */
--text-base:1rem;    /* 16 */
--text-sm:0.875rem;  /* 14 */
--text-xs:0.75rem;   /* 12 */
--text-label:0.6875rem;/* 11 — letterspaced caps */

--leading-tight:1.06;
--leading-display:1.14;
--leading-snug:1.35;
--leading-body:1.62;
--leading-loose:1.8;

--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;

--tracking-display:-0.02em;
--tracking-normal:0em;
--tracking-wide:0.06em;
--tracking-label:0.18em;   /* caps labels: KURSE, CAFÉ, ÖFFNUNGSZEITEN */
--tracking-mono:0.04em;
}

/* ===== tokens/spacing.css =============================================== */
:root{
--space-0:0;
--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;
--space-10:144px;

--gutter-page:32px;      /* mobile / narrow */
--gutter-page-lg:72px;   /* desktop */
--measure-prose:62ch;
--measure-narrow:44ch;
--container-max:1240px;
--container-text:760px;
--section-y:var(--space-9);
--control-h-sm:34px;
--control-h:44px;      /* min tap target */
--control-h-lg:54px;
}

/* ===== tokens/shape.css ================================================= */
:root{
/* Ceramics: mostly near-square edges with one soft, thrown-feeling radius */
--radius-none:0;
--radius-xs:2px;
--radius-sm:4px;
--radius-md:8px;
--radius-lg:18px;
--radius-vessel:28px 28px 22px 22px; /* asymmetric, hand-formed */
--radius-pill:999px;

--border-hairline:1px solid var(--line-hairline);
--border-ink:1px solid var(--line-strong);
--border-accent:1px solid var(--line-accent);

/* Shadows are diffuse and warm — never neutral grey, never tight */
--shadow-none:none;
--shadow-soft:0 1px 2px rgba(31,29,27,.04),0 8px 24px -12px rgba(31,29,27,.10);
--shadow-lift:0 2px 6px rgba(31,29,27,.05),0 20px 44px -20px rgba(31,29,27,.16);
--shadow-overlay:0 32px 80px -28px rgba(31,29,27,.32);
--shadow-inset-well:inset 0 1px 2px rgba(31,29,27,.07);
--ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--klay-clay-300);

--blur-veil:blur(14px); /* @kind other */
--veil-paper:rgba(247,244,238,.82);
--veil-ink:rgba(31,29,27,.55);
}

/* ===== tokens/motion.css ================================================ */
:root{
--dur-instant:90ms; /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-veil:640ms; /* @kind other */   /* image / section fade-ins */

--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */  /* default: settles like clay */
--ease-in-soft:cubic-bezier(.5,0,.9,.4); /* @kind other */

--transition-control:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
--transition-lift:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base) var(--ease-out-soft);
--press-scale:0.985; /* @kind other */
}

/* ===== tokens/base.css ================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-light);line-height:var(--leading-body);letter-spacing:var(--tracking-normal)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-display);font-weight:var(--weight-regular);letter-spacing:var(--tracking-display);line-height:var(--leading-display);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--line-accent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--line-strong)}
img{display:block;max-width:100%}
button{font:inherit}
.klay-label{font-family:var(--font-body);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-regular);color:var(--text-muted)}
::selection{background:var(--klay-clay-100);color:var(--klay-ink)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}