/*
 * Pszczeli Park design tokens -- the single source of truth for palette,
 * typography, spacing, radii and layout metrics across every surface of the
 * site: the server-rendered pages (homepage, shop, blog, docs, 404), the
 * Angular bundles (elements, panel, child-app) and the foundation's own
 * generated pages.
 *
 * Nothing here may be redefined anywhere else. A module stylesheet consumes
 * these names and never declares a raw color -- see DESIGN.md for the
 * semantic meaning of each token and the rules that keep this contract.
 *
 * Loaded before every other stylesheet, and shadowing the foundation's own
 * /static/webapp/tokens.css (see child/app/routes/routes.go), so framework
 * pages render in this project's palette instead of goatcore's default
 * green one.
 */

:root {
  color-scheme: light;
  --color-brand-yellow-50: #fffaf0;
  --color-brand-yellow-100: #fdecc2;
  --color-brand-yellow-500: #f0b429;
  --color-brand-yellow-700: #92650f;
  --color-honey-100: #fbf0d9;
  --color-honey-500: #d99a2b;
  --color-honey-700: #8a5c14;
  --color-ink-950: #181611;
  --color-ink-700: #3a362d;
  --color-ink-400: #726c5c;
  --color-surface: #ffffff;
  --color-surface-muted: #faf7ef;
  --color-border: #e7e0cd;
  --color-brand-red: #a4392c;
  --color-success: #2f6f4f;
  --color-warning: #92650f;
  --color-danger: #a4392c;
  --focus: #8a5c14;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;

  --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;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --content-readable: 720px;

  /*
   * Height of the sticky .site-header once the logo has collapsed
   * (see nav.qtpl: MIN_HEIGHT 70px + 2x10px padding). Used as
   * scroll-padding so a section jumped to via its #anchor lands
   * below the header instead of underneath it.
   */
  --header-offset: 92px;

  /*
   * Bridge to the foundation's ui-kit token contract (see
   * goatapp/web/projects/spa-app/src/styles.scss), so the embedded
   * elements bundle (d.ElementsModuleSrc, e.g. the AI chat widget)
   * renders with Pszczeli Park's own palette instead of the
   * foundation's default green theme.
   */
  --primary: var(--color-brand-yellow-500);
  --primary-hover: color-mix(in srgb, var(--color-brand-yellow-500) 88%, var(--color-ink-950));
  --primary-active: color-mix(in srgb, var(--color-brand-yellow-500) 76%, var(--color-ink-950));
  --on-primary: var(--color-ink-950);
  --surface: var(--color-surface);
  --surface-elevated: var(--color-surface);
  --surface-subtle: var(--color-surface-muted);
  --panel-bg: var(--color-surface);
  --border: var(--color-border);
  --border-strong: var(--color-ink-400);
  --text: var(--color-ink-950);
  --text-main: var(--color-ink-950);
  --text-muted: var(--color-ink-700);
  --text-subtle: var(--color-ink-400);
  --danger: var(--color-danger);
  --danger-strong: color-mix(in srgb, var(--color-danger) 85%, var(--color-ink-950));
  --control-height: 2.75rem;

  /*
   * Layout metrics under the names the foundation's own page stylesheets
   * expect (goatcore app/webapp/layout/assets/*.css). They are aliases, not
   * a second source of truth: every value resolves to one of the tokens
   * above, so a framework-rendered page and a Pszczeli Park page share the
   * same rhythm.
   */
  --background: var(--color-surface-muted);
  --layout-max: var(--container-max);
  --layout-prose: var(--content-readable);
  --layout-gutter: clamp(var(--space-4), 3.5vw, var(--space-6));
  --layout-hero-space: clamp(var(--space-6), 5vw, var(--space-8));
  --layout-section-space: clamp(var(--space-7), 7vw, var(--space-9));
}