/*
  Keyground Consulting: design tokens
  Three layers: primitive -> semantic -> component.
  Change brand values only in the primitive layer.
*/

:root {
  /* ---------- 1. PRIMITIVE ---------- */

  /* Brand palette */
  --p-ironbark: #20423A;
  --p-ironbark-deep: #16302A;
  --p-ochre: #C68A3A;
  --p-sage: #8AA595;
  --p-chalk: #F1F2EC;
  --p-stone: #DEE1D8;
  --p-slate: #586159;
  --p-ink: #21261F;
  --p-white: #FFFFFF;

  /* Extended / diagram palette */
  --p-waterline: #3F7A82;
  --p-clay: #9E5A3C;

  /* Utility */
  --p-focus: #3F7A82;
  --p-overlay-ironbark-90: rgba(22, 48, 42, 0.94);
  --p-overlay-ink-60: rgba(33, 38, 31, 0.6);

  /* Type families */
  --p-font-display: "Spectral", Georgia, "Times New Roman", serif;
  --p-font-body: "Public Sans", Calibri, Arial, sans-serif;
  --p-font-mono: "IBM Plex Mono", Consolas, "SF Mono", monospace;

  /* Type scale (fluid, 1.2 ratio baseline) */
  --p-size-000: 0.75rem;
  --p-size-00: 0.8125rem;
  --p-size-0: 0.9375rem;
  --p-size-1: 1.0625rem;
  --p-size-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --p-size-3: clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --p-size-4: clamp(2.1rem, 1.7rem + 2vw, 2.75rem);
  --p-size-5: clamp(2.75rem, 2.1rem + 3.2vw, 3.75rem);
  --p-size-6: clamp(3.25rem, 2.4rem + 4.3vw, 4.75rem);

  /* Spacing scale (8px base) */
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.5rem;
  --p-space-6: 2rem;
  --p-space-7: 3rem;
  --p-space-8: 4rem;
  --p-space-9: 6rem;
  --p-space-10: 8rem;

  /* Radii */
  --p-radius-sm: 2px;
  --p-radius-md: 4px;
  --p-radius-lg: 8px;
  --p-radius-full: 999px;

  /* Borders */
  --p-border-thin: 1px;
  --p-border-thick: 2px;

  /* Shadow */
  --p-shadow-sm: 0 1px 2px rgba(22, 48, 42, 0.08);
  --p-shadow-md: 0 4px 16px rgba(22, 48, 42, 0.10);
  --p-shadow-lg: 0 12px 32px rgba(22, 48, 42, 0.14);

  /* Motion */
  --p-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --p-duration-fast: 150ms;
  --p-duration-standard: 320ms;
  --p-duration-slow: 640ms;

  /* Layout */
  --p-content-max: 72rem;
  --p-content-narrow: 42rem;
  --p-gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- 2. SEMANTIC ---------- */

  --color-bg-page: var(--p-chalk);
  --color-bg-surface: var(--p-white);
  --color-bg-surface-sunken: var(--p-stone);
  --color-bg-inverse: var(--p-ironbark);
  --color-bg-inverse-deep: var(--p-ironbark-deep);
  --color-bg-accent-wash: color-mix(in srgb, var(--p-ochre) 12%, var(--p-chalk));

  --color-text-body: var(--p-ink);
  --color-text-muted: var(--p-slate);
  --color-text-heading: var(--p-ironbark-deep);
  --color-text-inverse: var(--p-chalk);
  --color-text-inverse-muted: #9BB2A5; /* lightened sage: raw #8AA595 only reached 4.15:1 on Ironbark, fails AA for text */
  --color-text-accent: #8A5F26; /* darkened ochre: meets AA on chalk/white for text use */
  --color-text-link: #2F6169; /* darkened waterline: raw #3F7A82 only reached 4.32:1 on Chalk, fails AA */

  --color-border-default: var(--p-stone);
  --color-border-strong: var(--p-slate);
  --color-border-inverse: rgba(241, 242, 236, 0.24);

  --color-accent: var(--p-ochre);
  --color-accent-strong: #A9762E;
  --color-brand: var(--p-ironbark);
  --color-brand-deep: var(--p-ironbark-deep);
  --color-focus-ring: var(--p-focus);

  --font-display: var(--p-font-display);
  --font-body: var(--p-font-body);
  --font-mono: var(--p-font-mono);

  --space-xs: var(--p-space-2);
  --space-sm: var(--p-space-3);
  --space-md: var(--p-space-5);
  --space-lg: var(--p-space-7);
  --space-xl: var(--p-space-8);
  --space-2xl: var(--p-space-9);
  --space-3xl: var(--p-space-10);

  --radius-control: var(--p-radius-md);
  --radius-card: var(--p-radius-lg);
  --radius-pill: var(--p-radius-full);

  --shadow-card: var(--p-shadow-sm);
  --shadow-card-hover: var(--p-shadow-md);
  --shadow-overlay: var(--p-shadow-lg);

  --ease-standard: var(--p-ease-standard);
  --duration-interaction: var(--p-duration-fast);
  --duration-reveal: var(--p-duration-standard);

  /* ---------- 3. COMPONENT ---------- */

  --header-bg: color-mix(in srgb, var(--p-chalk) 92%, transparent);
  --header-border: var(--color-border-default);
  --header-height: 4.5rem;

  --button-primary-bg: var(--color-brand);
  --button-primary-bg-hover: var(--color-brand-deep);
  --button-primary-text: var(--color-text-inverse);
  --button-secondary-bg: transparent;
  --button-secondary-border: var(--color-brand);
  --button-secondary-text: var(--color-brand);
  --button-ghost-text: var(--color-text-inverse);
  --button-ghost-border: var(--color-border-inverse);
  --button-radius: var(--radius-control);

  --card-bg: var(--color-bg-surface);
  --card-border: var(--color-border-default);
  --card-radius: var(--radius-card);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  --eyebrow-color: var(--color-text-accent);
  --eyebrow-font: var(--font-mono);
  --eyebrow-tracking: 0.14em;

  --nav-link-color: var(--color-text-body);
  --nav-link-color-hover: var(--color-brand);
  --nav-cta-bg: var(--color-brand);
  --nav-cta-text: var(--color-text-inverse);

  --footer-bg: var(--color-bg-inverse-deep);
  --footer-text: var(--color-text-inverse-muted);
  --footer-heading: var(--color-text-inverse);

  --form-field-border: var(--color-border-strong);
  --form-field-bg: var(--color-bg-surface);
  --form-field-focus: var(--color-focus-ring);

  --tag-bg: var(--color-bg-surface-sunken);
  --tag-text: var(--color-text-muted);

  --stat-number-color: var(--color-text-heading);
  --stat-label-color: var(--color-text-muted);
}