/* Penta.Co design tokens
   Primitive values never appear in components.
   Semantic tokens are the only names UI code should use. */

:root {
  /* Primitive — color */
  --ink-950: #161616;
  --ink-900: #1c1c1c;
  --ink-700: #3a3a3a;
  --ink-600: #545454;
  --ink-400: #8a8a8a;
  --ink-200: #d8d6d2;
  --ink-100: #eceae6;
  --bone-50: #f7f6f3;
  --bone-0: #fbfbf8;
  --gold-700: #8f6f2e;
  --gold-500: #c4a056;
  --gold-200: #ead9ae;
  --pastel-blue: #b8d4e3;
  --pastel-pink: #f2c6d2;
  --pastel-purple: #d4c4e3;
  --pastel-green: #c5dbc5;
  --overlay-ink: rgb(22 22 22 / 0.48);

  /* Semantic — color */
  --color-bg: var(--bone-50);
  --color-fg: var(--ink-950);
  --color-muted: var(--ink-600);
  --color-accent: var(--gold-500);
  --color-accent-strong: var(--gold-700);
  --color-surface: var(--bone-0);
  --color-surface-inverse: var(--ink-950);
  --color-on-inverse: var(--bone-50);
  --color-border: rgb(22 22 22 / 0.1);
  --color-border-strong: rgb(22 22 22 / 0.18);
  --color-focus: var(--gold-700);
  --color-danger: #8a2f2d;
  --color-on-pastel: var(--ink-900);

  /* Aliases used by existing class names */
  --primary: var(--color-fg);
  --secondary: var(--ink-900);
  --accent: var(--color-accent);
  --offwhite: var(--color-bg);
  --graytext: var(--color-muted);

  /* Type */
  --font-display: "Cormorant", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --display-xs: clamp(1.35rem, 4vw, 1.75rem);
  --display-sm: clamp(1.75rem, 5.5vw, 2.5rem);
  --display-md: clamp(2.25rem, 8vw, 3.75rem);
  --display-lg: clamp(2.6rem, 10vw, 5rem);
  --leading-body: 1.6;
  --leading-display: 1.05;
  --tracking-display: -0.03em;
  --tracking-label: 0.14em;
  --measure: 38rem;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-page: clamp(1rem, 4.2vw, 2rem);
  --space-section: clamp(3.25rem, 9vw, 7.5rem);
  --space-cluster: 0.5rem;
  --container: 80rem;

  /* Control */
  --tap: 2.75rem;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-sheet: 12px;
  --hairline: 1px solid var(--color-border);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-med: 280ms;
  --duration-slow: 520ms;
  --transition-smooth: var(--ease-out);
  --reveal-duration: var(--duration-slow);

  /* Elevation / layers */
  --z-nav: 40;
  --z-overlay: 50;
  --z-sheet: 60;
  --z-toast: 70;
  --announce-height: 2rem;
  --nav-height: 3.5rem;
  --tabbar-height: 3.75rem;
  --header-stack: calc(env(safe-area-inset-top, 0px) + var(--announce-height) + var(--nav-height));
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
  :root {
    --nav-height: 4.5rem;
    --tabbar-height: 0px;
    --header-stack: calc(env(safe-area-inset-top, 0px) + var(--announce-height) + var(--nav-height));
  }
}