/*
 * Temperfield Group design tokens
 * Phase D.1 — Design Tokens
 *
 * Primitive values are defined first. Reusable styles should consume semantic
 * tokens whenever a suitable role exists. Component-specific aliases belong
 * with the component phases that introduce them.
 */

:root {
  color-scheme: light;

  /* Primitive color palette */
  --color-green-950: #061d16;
  --color-green-900: #0b3024;
  --color-green-800: #0e4735;
  --color-green-700: #145f49;
  --color-green-100: #dcebe5;
  --color-green-50: #eef6f2;

  --color-neutral-950: #101311;
  --color-neutral-850: #252b28;
  --color-neutral-600: #5f6964;
  --color-neutral-300: #c8cec9;
  --color-neutral-50: #f5f3ed;
  --color-white: #ffffff;

  --color-copper-700: #935526;
  --color-copper-500: #b87333;
  --color-copper-300: #d18a55;

  --color-status-success: #1f6d4f;
  --color-status-warning: #8a5a16;
  --color-status-error: #a63d40;
  --color-status-info: #365f91;

  /* Semantic surfaces */
  --color-background-page: var(--color-neutral-50);
  --color-background-surface: var(--color-white);
  --color-background-subtle: var(--color-green-50);
  --color-background-selected: var(--color-green-100);
  --color-background-brand: var(--color-green-900);
  --color-background-brand-deep: var(--color-green-950);
  --color-background-inverse: var(--color-neutral-950);

  /* Semantic text */
  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-strong: var(--color-neutral-850);
  --color-text-brand: var(--color-green-900);
  --color-text-inverse: var(--color-neutral-50);
  --color-text-inverse-strong: var(--color-white);
  --color-text-accent: var(--color-copper-700);
  --color-text-accent-inverse: var(--color-copper-300);

  /* Semantic borders and decoration */
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-600);
  --color-border-brand: var(--color-green-900);
  --color-border-inverse: var(--color-green-100);
  --color-decoration-copper: var(--color-copper-500);

  /* Semantic links and actions */
  --color-link: var(--color-green-900);
  --color-link-hover: var(--color-green-800);
  --color-link-visited: var(--color-neutral-850);
  --color-action-primary: var(--color-green-700);
  --color-action-primary-hover: var(--color-green-800);
  --color-action-primary-active: var(--color-green-900);
  --color-action-primary-text: var(--color-white);
  --color-action-secondary: transparent;
  --color-action-secondary-hover: var(--color-green-50);
  --color-action-secondary-text: var(--color-green-900);
  --color-action-secondary-border: var(--color-green-900);
  --color-action-disabled: var(--color-neutral-300);
  --color-action-disabled-text: var(--color-neutral-850);

  /* Focus */
  --color-focus-ring: var(--color-copper-700);
  --color-focus-ring-inverse: var(--color-copper-300);

  /* Font families */
  --font-family-heading:
    "Source Serif 4",
    Georgia,
    "Times New Roman",
    serif;
  --font-family-body:
    "Source Sans 3",
    "Segoe UI",
    Arial,
    sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Fluid type scale */
  --font-size-eyebrow: clamp(0.8125rem, 0.795rem + 0.089vw, 0.875rem);
  --font-size-secondary: clamp(0.875rem, 0.857rem + 0.089vw, 0.9375rem);
  --font-size-interface: clamp(0.9375rem, 0.92rem + 0.089vw, 1rem);
  --font-size-body: clamp(1rem, 0.964rem + 0.179vw, 1.125rem);
  --font-size-lead: clamp(1.125rem, 1.054rem + 0.357vw, 1.375rem);
  --font-size-h4: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem);
  --font-size-h3: clamp(1.5rem, 1.286rem + 1.071vw, 2.25rem);
  --font-size-h2: clamp(2rem, 1.571rem + 2.143vw, 3.5rem);
  --font-size-h1: clamp(2.5rem, 1.929rem + 2.857vw, 4.5rem);
  --font-size-display: clamp(3rem, 2.286rem + 3.571vw, 5.5rem);

  /* Line heights */
  --line-height-display: 1.05;
  --line-height-heading: 1.12;
  --line-height-heading-small: 1.2;
  --line-height-body: 1.65;
  --line-height-interface: 1.4;
  --line-height-compact: 1.25;

  /* Letter spacing */
  --letter-spacing-display: -0.01em;
  --letter-spacing-heading: -0.005em;
  --letter-spacing-body: 0;
  --letter-spacing-interface: 0.01em;
  --letter-spacing-eyebrow: 0.1em;

  /* Spacing scale */
  --space-0: 0;
  --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-32: 8rem;

  /* Responsive spacing roles */
  --space-section: clamp(4rem, 2.857rem + 5.714vw, 8rem);
  --space-section-compact: clamp(3rem, 2.429rem + 2.857vw, 5rem);
  --space-component-gap: clamp(1rem, 0.857rem + 0.714vw, 1.5rem);
  --space-page-gutter: clamp(1rem, 0.714rem + 1.429vw, 2rem);

  /* Content widths */
  --measure-compact: 45ch;
  --measure-reading: 65ch;
  --measure-wide: 75ch;
  --container-narrow: 48rem;
  --container-content: 70rem;
  --container-wide: 80rem;

  /* Borders and radii */
  --border-width-thin: 0.0625rem;
  --border-width-strong: 0.125rem;
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 0.1875rem;
  --radius-none: 0;
  --radius-small: 0.25rem;
  --radius-medium: 0.5rem;
  --radius-round: 999rem;

  /* Elevation */
  --shadow-small: 0 0.0625rem 0.125rem rgb(16 19 17 / 8%);
  --shadow-medium: 0 0.75rem 2rem rgb(16 19 17 / 12%);

  /* Sizing */
  --size-touch-target: 2.75rem;
  --size-icon-small: 1rem;
  --size-icon-medium: 1.25rem;
  --size-icon-large: 1.5rem;

  /* Motion */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-moderate: 200ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Layer order */
  --layer-base: 0;
  --layer-dropdown: 100;
  --layer-sticky: 200;
  --layer-overlay: 300;
  --layer-modal: 400;
  --layer-notification: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-moderate: 0.01ms;
    --duration-slow: 0.01ms;
  }
}