/**
 * Graydian redesign — design tokens (Phase 0)
 * Source: marketing/website/visual-brand-direction.md (locked 2026-07-31)
 * Use in custom WP theme (theme.json / style.css). Do not ship purple WP presets.
 */

:root {
  /* Color */
  --ink: #14161a;
  --ink-soft: #3a3f47;
  --paper: #f7f6f4;
  --paper-deep: #eceae6;
  --line: #d8d5cf;
  --signal: #2f5bff;
  --signal-hover: #2448cc;
  --on-signal: #ffffff;
  --photo-scrim: rgba(20, 22, 26, 0.45);

  /* Type — load Syne + Source Sans 3 in theme; these are stack fallbacks */
  --font-display: "Syne", "Source Sans 3", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  /* Type scale (desktop starting points) */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-hero: clamp(2rem, 4vw, 3.25rem);

  --leading-body: 1.55;
  --leading-tight: 1.2;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  --measure: 38rem;
  --page-max: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* Controls */
  --radius-sm: 2px;
  --radius-md: 4px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 35%, transparent);
}

/* Baseline page chrome — light Workshop clarity */
html {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: var(--leading-body);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

a {
  color: var(--signal);
}

a:hover {
  color: var(--signal-hover);
}

h1,
h2,
h3,
.brand-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--ink);
}

.button-primary,
.wp-block-button__link {
  display: inline-block;
  background: var(--signal);
  color: var(--on-signal);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
}

.button-primary:hover,
.wp-block-button__link:hover {
  background: var(--signal-hover);
  color: var(--on-signal);
}

.button-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Hero without photo (deferred imagery) */
.hero-paper {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-8) var(--gutter);
}

.hero-paper .brand-logo {
  margin-bottom: var(--space-5);
}

.hero-paper h1 {
  font-size: var(--text-hero);
  max-width: 18ch;
  margin: 0 0 var(--space-4);
}

.hero-paper .support {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}