/*
 * Cascade layer order, declared first so it holds
 * regardless of where layers appear later in the page.
 */
@layer bleed.tokens, bleed.base, bleed.components;

/* --- @property: typed, animatable tokens ----------------------------------- */
/* Makes key tokens typed + animatable, so theme switches can interpolate
 * color/length instead of snapping. */
@property --ink       { syntax: "<color>";  inherits: true; initial-value: oklch(0.45 0.31 264); }
@property --paper     { syntax: "<color>";  inherits: true; initial-value: oklch(0.97 0.01 90); }
@property --accent  { syntax: "<color>";  inherits: true; initial-value: oklch(0.2 0.01 264); }
@property --positive  { syntax: "<color>";  inherits: true; initial-value: oklch(0.45 0.31 264); }
@property --positive-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.65 0.31 264); }
@property --positive-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.25 0.31 264); }
@property --negative  { syntax: "<color>";  inherits: true; initial-value: oklch(0.2 0.01 264); }
@property --negative-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.4 0.01 264); }
@property --negative-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.1 0.01 264); }
@property --warning   { syntax: "<color>";  inherits: true; initial-value: oklch(0.4 0.16 264); }
@property --warning-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.6 0.16 264); }
@property --warning-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.2 0.16 264); }
@property --neutral   { syntax: "<color>";  inherits: true; initial-value: oklch(0.6 0.05 264); }
@property --neutral-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.8 0.05 264); }
@property --neutral-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.4 0.05 264); }
@property --radius        { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --border-w      { syntax: "<length>"; inherits: true; initial-value: 2px; }
@property --hover-shift-x { syntax: "<length>"; inherits: true; initial-value: 3px; }
@property --hover-shift-y { syntax: "<length>"; inherits: true; initial-value: 3px; }

@layer bleed.base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  :root {
    /* native form controls (checkbox/radio/range) tint to the theme */
    accent-color: var(--accent, var(--ink));
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  html {
    font-family: var(--font-body);
    line-height: var(--line-height-normal);
  }

  body {
    min-height: 100svh;
    color: var(--ink);
    background-color: var(--paper);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Headings carry no visual type styling — they mark document structure only.
   * Apply size, weight, and space to text directly with the --font-size-*, --line-height-*, and --letter-spacing-* tokens. */
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  p, ul, ol, dl, table, figure, blockquote {
    text-wrap: pretty;
  }

  a {
    color: var(--ink);
    text-underline-offset: 0.15em;
    text-decoration-thickness: max(1px, 0.08em); /* px-ok: hairline floor */
  }

  code, kbd, samp, pre {
    font-family: var(--font-body);
  }

  img, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

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

  hr {
    border: none;
    border-top: var(--border-w) var(--border-style) var(--ink);
  }

  ::selection {
    background: var(--accent);
    color: var(--paper);
  }

  :where([hidden]) {
    display: none !important;
  }

  /* --- focus: always visible, never themeable away ------------------------- */
  :where(a, button, input, select, textarea, summary, [tabindex], [popovertarget], dialog):focus-visible {
    outline: max(var(--space-1), var(--border-w)) dashed var(--accent);
    outline-offset: var(--space-2); /* px-ok: fixed focus gap */
  }
  /* kill the default ring only where we replace it */
  :where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
    outline: none;
  }

  /* --- a11y utility -------------------------------------------------------- */
  .visually-hidden:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px; /* px-ok */
    padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  /* --- respect motion preferences ----------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important; /* else staged entries (modal) still stall */
      scroll-behavior: auto !important;
    }
    /* the bleed press is a translate; hold still instead. :focus-within is here
     * for .input-group, which presses the group off a focused control inside. */
    :where(*):hover, :where(*):active, :where(*):focus, :where(*):focus-within {
      translate: none !important;
    }
  }
}
/* The .icon utility — sizing for an <svg><use></svg> sprite reference.
 *   <svg class="icon" aria-hidden="true"><use href="#icon-info"/></svg>
 * Sizing is 1em, so an icon follows its slot's font-size, and inherits colour like text. */

@layer bleed.tokens {
  :root {
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E %3Cpath d='m3.75 5.75 4.25 4.5 4.25-4.5'/%3E %3C/svg%3E");
  }
}

@layer bleed.base {
  .icon {
    display: inline-block;
    flex: none;
    inline-size: 1em;
    block-size: 1em;
  }
}
/* Typography roles — <h1 class="t-display-5">Heading</h1>, <p class="t-body-2">Copy</p>
 *
 * - Two families, seven sizes each: t-body-1..7, t-display-1..7.
 * - Each family has its own font-size scale (--font-size-1..7 vs --font-size-display-1..7).
 * - line-height/letter-spacing/font-weight are fixed per role, not separate knobs —
 *   pick the role and size that fit rather than composing properties by hand.
 * - t-body: reading copy — normal leading/tracking/weight at every size.
 * - t-display: headline register — wide tracking, bold weight, text-wrap: balance,
 *   line-height tightening as size climbs (1-2 normal, 3-5 snug, 6-7 tight). */

@layer bleed.base {
  .t-body-1,
  .t-body-2,
  .t-body-3,
  .t-body-4,
  .t-body-5,
  .t-body-6,
  .t-body-7 {
    font-family: var(--font-body);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
  }

  .t-body-1 { font-size: var(--font-size-1); }
  .t-body-2 { font-size: var(--font-size-2); }
  .t-body-3 { font-size: var(--font-size-3); }
  .t-body-4 { font-size: var(--font-size-4); }
  .t-body-5 { font-size: var(--font-size-5); }
  .t-body-6 { font-size: var(--font-size-6); }
  .t-body-7 { font-size: var(--font-size-7); }

  .t-display-1,
  .t-display-2,
  .t-display-3,
  .t-display-4,
  .t-display-5,
  .t-display-6,
  .t-display-7 {
    font-family: var(--font-display);
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-bold);
    text-wrap: balance;
    text-transform: uppercase;
  }

  .t-display-1 { font-size: var(--font-size-display-1); line-height: var(--line-height-normal); }
  .t-display-2 { font-size: var(--font-size-display-2); line-height: var(--line-height-normal); }
  .t-display-3 { font-size: var(--font-size-display-3); line-height: var(--line-height-snug); }
  .t-display-4 { font-size: var(--font-size-display-4); line-height: var(--line-height-snug); }
  .t-display-5 { font-size: var(--font-size-display-5); line-height: var(--line-height-snug); }
  .t-display-6 { font-size: var(--font-size-display-6); line-height: var(--line-height-tight); }
  .t-display-7 { font-size: var(--font-size-display-7); line-height: var(--line-height-tight); }
}