/* Shinri design tokens — copied from ds/tokens (colors, typography, spacing, shape, motion, base).
   Keep in sync with /ds; fonts are self-hosted via css/fonts.css (tools/fetch_fonts.py). */

/* ---- ds/tokens/colors.css ---- */
/* Colour system — sampled directly from `assets/reference-einladung-apero.jpeg`
   and the shinri logo lockups. Four brand colours carry the whole identity:
   violet (voice), yellow (light), orange (warmth), magenta (the logo). */
:root {
  /* — Violett / Aubergine — the primary voice. Sampled #54016d — */
  --violet-900: #300040;
  --violet-800: #43005a;
  --violet-700: #54016d; /* brand primary */
  --violet-600: #6b1a86;
  --violet-500: #8339a0;
  --violet-300: #b98ecb;
  --violet-200: #dcc6e6;
  --violet-100: #eee2f4;
  --violet-050: #f8f2fb;

  /* — Sonnengelb — sampled #ffe900 — */
  --yellow-600: #e0cc00;
  --yellow-500: #ffe900;
  --yellow-400: #ffef4d;
  --yellow-300: #fff489;
  --yellow-200: #fff9bf;
  --yellow-100: #fffce2;

  /* — Mandarine — sampled #fd6802 — */
  --orange-700: #cc5100;
  --orange-600: #ec5f00;
  --orange-500: #fd6802;
  --orange-400: #ff8c3d;
  --orange-300: #ffb478;
  --orange-200: #ffdcc1;
  --orange-100: #fff0e5;

  /* — Shinri Magenta — sampled from the logo lockup #be2252 — */
  --magenta-700: #8f1a3e;
  --magenta-500: #be2252;
  --magenta-400: #d8517b;
  --magenta-200: #f2c3d2;
  --magenta-100: #fbeaf0;

  /* — Psycorn Pink — the unicorn sub-mark #ed1e79 — */
  --pink-500: #ed1e79;
  --pink-100: #fde3ee;

  /* — Neutrals. Warm-black from the logo artwork (#212222), warm paper — */
  --ink-900: #212222;
  --ink-700: #3d3e40;
  --ink-600: #5a5b5e;
  --ink-500: #77787c;
  --ink-400: #9b9ca0;
  --ink-300: #c6c6ca;
  --ink-200: #e2e0e5;
  --ink-100: #f0eef2;
  --paper: #ffffff;
  --paper-warm: #fffdf7;
  --paper-violet: #f8f2fb;

  /* ————— Semantic aliases: use these in components ————— */
  --brand-primary: var(--violet-700);
  --brand-primary-hover: var(--violet-800);
  --brand-primary-active: var(--violet-900);
  --brand-accent: var(--orange-500);
  --brand-highlight: var(--yellow-500);
  --brand-mark: var(--magenta-500);

  --text-heading: var(--violet-700);
  --text-body: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-400);
  --text-on-dark: #ffffff;
  --text-on-violet: #ffffff;
  --text-on-yellow: var(--violet-700);
  --text-on-orange: var(--violet-700);
  --text-link: var(--violet-700);
  --text-link-hover: var(--orange-500);

  --surface-page: var(--paper);
  --surface-page-warm: var(--paper-warm);
  --surface-card: #ffffff;
  --surface-sunken: var(--ink-100);
  --surface-violet: var(--violet-700);
  --surface-violet-soft: var(--violet-050);
  --surface-yellow: var(--yellow-500);
  --surface-yellow-soft: var(--yellow-100);
  --surface-orange: var(--orange-500);
  --surface-orange-soft: var(--orange-100);
  --surface-ink: var(--ink-900);

  --border-default: var(--ink-200);
  --border-strong: var(--violet-700);
  --border-subtle: var(--ink-100);
  --focus-ring: var(--orange-500);

  /* Status — pulled from the brand palette, never from a generic UI kit */
  --status-success: #2f7a4d;
  --status-success-soft: #e6f2ea;
  --status-warning: var(--orange-600);
  --status-warning-soft: var(--orange-100);
  --status-error: var(--magenta-500);
  --status-error-soft: var(--magenta-100);
  --status-info: var(--violet-600);
  --status-info-soft: var(--violet-100);
}

/* ---- ds/tokens/typography.css ---- */
/* Type system. Two families: a high-contrast display serif for the human,
   editorial voice; a humanist sans for everything functional. */
:root {
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Display scale — the invitation sets headlines enormous and very tight. */
  --text-hero: clamp(3.75rem, 11vw, 9.5rem);   /* "Apéro" */
  --text-display-1: clamp(2.75rem, 6vw, 5rem);
  --text-display-2: clamp(2.25rem, 4.4vw, 3.5rem);
  --text-display-3: 2.25rem;
  --text-title: 1.75rem;
  --text-subtitle: 1.375rem;

  /* Sans scale */
  --text-lead: 1.25rem;
  --text-body: 1.0625rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-micro: 0.6875rem;

  --leading-hero: 0.86;
  --leading-display: 0.98;
  --leading-title: 1.15;
  --leading-body: 1.6;
  --leading-loose: 1.75;

  --tracking-hero: -0.02em;
  --tracking-display: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.16em;

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

  /* Old-style figures are part of the look — the invitation's "30. Mai 2024". */
  --numerals-oldstyle: "onum" 1; /* @kind other */
  --numerals-lining: "lnum" 1; /* @kind other */
}

/* ---- ds/tokens/spacing.css ---- */
/* 4px base grid. Generous vertical rhythm — the brand breathes. */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --gutter: var(--space-6);
  --section-y: clamp(64px, 9vw, 128px); /* @kind spacing */
  --container-max: 1200px;
  --container-narrow: 720px;
  --measure: 68ch;
}

/* ---- ds/tokens/shape.css ---- */
/* Shape. The invitation is built from hard-edged colour planes, so the
   default corner is square. Interactive things are pills — that is where the
   friendliness lives (and it echoes the rounded terminals of the logotype). */
:root {
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-width: 1px;
  --border-width-strong: 2px;
  --rule-width: 1px;

  /* Shadows are used sparingly — flat colour does the lifting. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(33, 34, 34, 0.06);
  --shadow-card: 0 2px 10px rgba(84, 1, 109, 0.06);
  --shadow-raised: 0 8px 28px rgba(84, 1, 109, 0.1);
  --shadow-overlay: 0 24px 64px rgba(48, 0, 64, 0.24);
  --ring-focus: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus-ring);
  --ring-focus-inset: inset 0 0 0 2px var(--focus-ring);
}

/* ---- ds/tokens/motion.css ---- */
/* Motion: calm, never bouncy. This is a psychiatric practice — nothing should
   startle. Short ease-out for state changes, longer for entrances. */
:root {
  --duration-instant: 90ms; /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-entrance: 700ms; /* @kind other */

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */

  --transition-color: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out); /* @kind other */
  --transition-transform: transform var(--duration-base) var(--ease-out); /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; /* @kind other */ --duration-fast: 0ms; /* @kind other */ --duration-base: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */ --duration-entrance: 0ms; /* @kind other */
  }
}

/* ---- ds/tokens/base.css ---- */
/* Minimal element defaults so any page linking styles.css looks like Shinri. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
h1 { font-size: var(--text-display-1); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero); }
h2 { font-size: var(--text-display-2); }
h3 { font-size: var(--text-title); line-height: var(--leading-title); }
h4 { font-size: var(--text-subtitle); line-height: var(--leading-title); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); text-wrap: pretty; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: var(--transition-color); }
a:hover { color: var(--text-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
strong { font-weight: var(--weight-semibold); }
hr { border: 0; border-top: var(--rule-width) solid var(--border-default); margin: var(--space-10) 0; }
::selection { background: var(--yellow-500); color: var(--violet-700); }