/*
  Plinthlist design tokens
  Single source of truth for brand values. No hex codes, font names, or
  spacing values should be hard-coded anywhere else on the site.
  One light theme only (no dark mode in V1).
*/

:root {
  /* Color (six approved values; rust is the sole accent) */
  --color-accent: #A7410E;          /* Rust: primary actions, links, emphasis */
  --color-text: #2B2623;            /* Ink: body text and icons */
  --color-text-muted: #5E5853;      /* Muted: supporting text */
  --color-surface: #F7F4EF;         /* Warm white: page background */
  --color-surface-raised: #FFFFFF;  /* White: inputs and raised surfaces */
  --color-border: #7A736C;          /* Control borders, neutral icons */
  --color-card-border: #E5E0D8;     /* Thin card outline (decorative, never the only boundary of a control) */

  /* Color roles that reuse the six values above (no new colors) */
  --color-on-accent: var(--color-surface-raised); /* Text on rust fill */
  --color-link: var(--color-text);   /* passive links are ink with an underline; rust is only for the one primary action */

  /* Focus: 3px near-black ring, 2px offset, one treatment everywhere */
  --focus-ring-color: var(--color-text);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Interactive target minimum (no compact sizes) */
  --target-min: 44px;

  /* Typography roles */
  --font-display: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type scale (body text never below 16px; metadata 14px) */
  --text-xs: 0.875rem;   /* 14px: metadata */
  --text-sm: 1rem;       /* 16px: body, controls */
  --text-md: 1.125rem;   /* 18px: listing titles */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 2.75rem;   /* 44px: dense pages cap titles here */

  --line-height-tight: 1.25;
  --line-height-body: 1.5;

  /* Spacing: 8px base unit, 4px half step */
  --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: 80px;

  /* Layout */
  --container-max: 1200px;
  --container-gutter: 24px;       /* 16px on phones, see below */
  --measure-text: 640px;          /* body text block max width */

  /* Radius used across controls and cards */
  --radius: 4px;

  /*
    Breakpoints (reference values).
    CSS custom properties cannot be read inside @media queries, so these
    exist for JS and documentation. Media queries must use the same
    numbers: 480px, 760px, 1024px, 1280px.
  */
  --bp-sm: 480px;
  --bp-md: 760px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (max-width: 760px) {
  :root {
    --container-gutter: 16px;
  }
}

/* Base application of tokens */
html {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: var(--line-height-body);
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--line-height-tight);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.skip-link { text-decoration: none; }   /* a boxed control, not a text link */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}