/* Dialekt brand tokens — copied from the dialekt-design system (Parchment &
   Clay). Colors, typography, spacing, and effects only; landing.css builds the
   page components on top of these. Keep in sync with .claude/skills/dialekt-design
   if the brand shifts. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Marcellus&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

:root {
  /* --- Stone: warm neutral scale (parchment -> ink) --- */
  --stone-50: #fbf8f2;
  --stone-100: #f5eee0;
  --stone-200: #ebe0cb;
  --stone-300: #dbc9a8;
  --stone-400: #bfa67c;
  --stone-500: #9a8260;
  --stone-600: #77654b;
  --stone-700: #574a38;
  --stone-800: #3c3327;
  --stone-900: #281f18;
  --stone-950: #17110c;

  /* --- Clay / terracotta: primary --- */
  --clay-50: #fbeee7;
  --clay-100: #f4d9c8;
  --clay-200: #e7b59a;
  --clay-300: #da906c;
  --clay-400: #ca6f47;
  --clay-500: #b85c38; /* primary */
  --clay-600: #9e4a2c;
  --clay-700: #7f3b24;
  --clay-800: #602d1d;
  --clay-900: #432016;

  --umber-900: #221710;
  --gold-400: #c8973a;
  --gold-500: #b0801f;
  --green-500: #5f7048;
  --green-100: #e4e7d4;

  /* Surfaces */
  --color-bg: var(--stone-100);
  --color-bg-sunken: var(--stone-200);
  --surface-card: var(--stone-50);
  --surface-raised: #ffffff;
  --surface-inverse: var(--umber-900);

  /* Text */
  --text-primary: var(--stone-900);
  --text-secondary: var(--stone-700);
  --text-muted: var(--stone-500);
  --text-on-primary: var(--stone-50);
  --text-on-inverse: var(--stone-100);

  /* Brand / interactive */
  --primary: var(--clay-500);
  --primary-hover: var(--clay-600);
  --primary-press: var(--clay-700);
  --primary-soft: var(--clay-50);

  /* Lines & borders */
  --border: var(--stone-300);
  --border-strong: var(--stone-400);
  --border-soft: rgba(86, 71, 56, 0.14);
  --ring: rgba(184, 92, 56, 0.34);

  --success: var(--green-500);
  --success-soft: var(--green-100);
  --live: var(--clay-500);

  /* Fonts */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-wordmark: "Marcellus", "Cormorant Garamond", Georgia, serif;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Elevation — warm-tinted */
  --shadow-sm: 0 1px 2px rgba(34, 23, 16, 0.06), 0 1px 1px rgba(34, 23, 16, 0.04);
  --shadow-md: 0 4px 14px rgba(34, 23, 16, 0.08), 0 1px 3px rgba(34, 23, 16, 0.05);
  --shadow-lg: 0 14px 34px rgba(34, 23, 16, 0.12), 0 4px 10px rgba(34, 23, 16, 0.06);
  --glow-clay: 0 0 0 6px rgba(184, 92, 56, 0.1), 0 0 26px rgba(184, 92, 56, 0.22);
  --blur-sm: blur(6px);
  --ring-focus: 0 0 0 3px var(--ring);

  /* Paper grain overlay */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}