/* ==========================================================================
   BASE — cascade layers, reset, document defaults, typography, links, focus,
   utilities. Part of the F-UI component library (docs/research/design-system.md
   §5–§8). Loaded after tokens.css on every page by components/head_assets.html.

   Rules for every stylesheet in static/css/:
   - Colours, sizes, radii, shadows and motion come ONLY from semantic tokens
     (--color-*, --text-*, --space-*, --radius-*, --shadow-*, --motion-*, …).
     Never --palette-* / --brand-* and never literal colours.
   - Gold is never text on a light surface: links and small gold text use
     --color-link / --color-text-accent (bronze); brand gold is a fill with dark
     text or decoration only.
   - Every interactive element keeps a visible focus ring (outline, not only a
     box-shadow, so it survives forced-colours mode).
   - Movement reads the --motion-* tokens, which collapse to zero under
     prefers-reduced-motion; looping animations stop in that mode.
   ========================================================================== */

@layer reset, base, layout, components, shell, site, utilities;


/* ---------------------------------------------------------------- reset */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
  }

  img,
  picture,
  video,
  canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }

  svg {
    flex-shrink: 0;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  /* Reflow (WCAG 1.4.10): a control is never wider than its container. A file input or a
     textarea with `cols` would otherwise make a 320px page scroll sideways (CR-W13-18). */
  input,
  textarea,
  select {
    max-width: 100%;
  }

  button {
    cursor: pointer;
  }

  :where(button):disabled {
    cursor: not-allowed;
  }

  p,
  li,
  dd,
  figcaption,
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  table {
    border-collapse: collapse;
  }

  fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
  }

  legend {
    padding: 0;
  }

  :where(ul, ol)[role="list"] {
    list-style: none;
    padding: 0;
  }

  [hidden] {
    display: none !important;
  }
}


/* ---------------------------------------------------------------- document */
@layer base {
  html {
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
    scroll-padding-bottom: var(--space-8);
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-family-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-text);
    color: var(--color-text);
    background-color: var(--color-bg);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Any scope switch paints its own surface (tokens.css gotcha #4) and
     re-establishes the product's text scale. Never on <html>: the root font
     size must stay the browser's, or every rem token would shrink. */
  [data-theme] {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  [data-product]:not(html) {
    font-size: var(--text-base);
    line-height: var(--leading-text);
  }

  ::selection {
    background-color: var(--color-surface-selected-hover);
    color: var(--color-text);
  }

  /* ---- Headings: CRM scale (fixed) ---- */
  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  h3 { font-size: var(--text-md); }
  h4, h5, h6 { font-size: var(--text-base); }

  p {
    text-wrap: pretty;
  }

  strong, b {
    font-weight: var(--font-weight-semibold);
  }

  small {
    font-size: var(--text-sm);
  }

  /* ---- Links: body links are always underlined (SC 1.4.1) and bronze on
     light surfaces (5.79:1 on ivory); light gold on dark bands. ---- */
  a {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: 0.2em;
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  a:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: var(--border-width-strong);
  }

  /* ---- Focus: 3px ring, 2px outside the component (design-system §4.6) ---- */
  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Native date/time inputs move focus into their inner segments, where
     :focus-visible does not reach the input: text-entry controls always show
     the ring while focused. */
  :is(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):is(:focus, :focus-within) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Programmatic focus targets (skip-link target, moved-to headings) are not
     controls: no ring around the whole region. */
  main[tabindex="-1"]:focus,
  :is(h1, h2, h3)[tabindex="-1"]:focus {
    outline: none;
  }

  hr {
    border: 0;
    border-top: var(--border-width) solid var(--color-border-subtle);
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-family-mono);
    font-size: var(--text-sm);
  }

  code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-1);
    background-color: var(--color-surface-sunken);
    overflow-wrap: anywhere;
  }

  kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.05em 0.4em;
    border: var(--border-width) solid var(--color-border-strong);
    border-bottom-width: var(--border-width-strong);
    border-radius: var(--radius-2);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    text-align: center;
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  /* Inline SVG icons from {% icon %}: sized by their width/height attributes. */
  .icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
  }

  /* ---- Skip link: first focusable element on every page (SC 2.4.1) ---- */
  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-skip-link);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-control);
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transform: translateY(-300%);
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    transform: none;
    color: var(--color-primary-text);
  }
}


/* ---------------------------------------------------------------- utilities */
@layer utilities {
  /* Hidden visually, still read by screen readers (and still focusable for
     inputs such as radio-card radios). -focusable reveals itself on focus. */
  .visually-hidden,
  .visually-hidden-focusable:not(:focus, :focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .text-secondary { color: var(--color-text-secondary); }
  .text-muted { color: var(--color-text-muted); }
  .text-accent { color: var(--color-text-accent); }
  .text-danger { color: var(--color-danger-text); }
  .text-success { color: var(--color-success-text); }
  .text-warning { color: var(--color-warning-text); }
  .text-sm { font-size: var(--text-sm); }
  .text-xs { font-size: var(--text-xs); }
  .text-lg { font-size: var(--text-lg); }
  .fw-semibold { font-weight: var(--font-weight-semibold); }
  .tabular { font-variant-numeric: var(--font-numeric-tabular); }
  .mono { font-family: var(--font-family-mono); }
  .nowrap { white-space: nowrap; }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Layout primitives */
  .stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
  .stack-lg { display: flex; flex-direction: column; gap: var(--space-8); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .cluster-lg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
  .spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
  }
  .measure { max-width: var(--measure-prose); }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}