/* ============================================================
   EveryChat — base.css
   ------------------------------------------------------------
   Foundational rules for raw HTML. A page that renders without
   any classes attached should still look reasonable and
   inherit EveryChat's typographic and color identity.

   All values reference tokens from tokens.css. Hardcoded
   values are limited to cases where a token would be
   nonsensical (e.g. `box-sizing: border-box`,
   `display: none`, structural `0`).

   Section index:
     1. Modern reset
     2. HTML / body defaults
     3. Base typography
     4. Form element resets
     5. Global focus-visible ring
     6. Reduced motion

   Note on overlap with layout.css:
     layout.css §1 ("Base reset (page-level only)") also sets
     html/body height/margin/padding, body background, color,
     font-family, font-size, line-height, antialiasing, and an
     overflow:hidden rule for the shell.
     base.css owns the typographic + color defaults (so a no-
     shell page still renders correctly), and layout.css owns
     the shell-specific behavior (height:100%, overflow:hidden,
     .body--scrollable opt-out). Where the two overlap on
     identical declarations, the duplication is intentional —
     base.css is meant to stand alone if loaded without
     layout.css. Loading order should be tokens → base →
     layout → components → utilities.
     Flagged in the summary at the bottom.
   ============================================================ */


/* ============================================================
   1. MODERN RESET
   ============================================================
   Box-sizing inheritance, margin/padding zeroing on the
   elements that need it, and removal of default list styles
   on lists that carry a role (per WHATWG accessibility
   guidance — non-roled lists keep their semantics).
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

/* Tables collapse borders by default — components can
   override per-table. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ============================================================
   2. HTML / BODY DEFAULTS
   ============================================================ */

html {
  scroll-behavior: smooth;
  /* Anchor for rem-based sizing if ever introduced. The
     project currently uses px values for fonts, so this is
     just a safe default. */
}

body {
  background: var(--color-bg-off);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ============================================================
   3. BASE TYPOGRAPHY
   ============================================================
   Raw element styling so unclassed prose looks correct.
   Components will frequently override these on their own
   surfaces. */

/* ----- Headings ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-display);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

h6 {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* ----- Paragraphs ----- */
p {
  margin: 0;
}

p + p {
  margin-top: var(--space-6); /* 12px between stacked paragraphs */
}

/* ----- Inline emphasis ----- */
strong, b {
  font-weight: var(--font-weight-semibold);
}

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

/* ----- Links ----- */
a {
  color: var(--color-action);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--duration-base) var(--easing-default);
}

a:hover {
  color: var(--color-action-hover);
}

/* ----- Lists ----- */
ul,
ol {
  margin: 0;
  padding-left: var(--space-9); /* 20px — comfortable bullet inset */
}

li + li {
  margin-top: var(--space-2); /* 4px between list items */
}

dl {
  margin: 0;
}

dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

dd {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ----- Code & preformatted ----- */
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  margin: 0;
  overflow-x: auto;
}

/* ----- Blockquote ----- */
blockquote {
  margin: 0;
  padding-left: var(--space-8); /* 16px */
  border-left: 3px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ----- Horizontal rule ----- */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* ----- Selection ----- */
::selection {
  background: var(--color-blue-pale);
  color: var(--color-text);
}


/* ============================================================
   4. FORM ELEMENT RESETS
   ============================================================
   Strip browser defaults so components in components.css have
   a clean baseline to build on. Focus styling is added back
   globally in §5 via :focus-visible. */

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

button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  /* Buttons in the wild often inherit text-align:center, but
     unstyled buttons can be expected to look like text — leave
     alignment to components. */
}

button:disabled {
  cursor: not-allowed;
}

input,
textarea,
select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  outline: 0;
}

textarea {
  resize: vertical;
}

/* Remove the inner focus ring Firefox adds to buttons. */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Search input cancel button — neutralized; components decide. */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* Placeholder color — components may override. */
::placeholder {
  color: var(--color-text-dim);
  opacity: 1; /* Firefox lowers placeholder opacity by default */
}

/* Fieldsets stripped to nothing visible; pages add chrome. */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
}


/* ============================================================
   5. GLOBAL FOCUS-VISIBLE RING
   ============================================================
   Every interactive element gets a 2px focus-visible ring as a
   baseline. Component-specific focus styles in components.css
   (e.g. .btn:focus-visible with its 3px box-shadow ring)
   override per component.

   Mouse clicks suppress the ring; keyboard navigation shows it
   — that's what :focus-visible is for. */

:focus {
  outline: 0;
}

:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}


/* ============================================================
   6. REDUCED MOTION
   ============================================================
   Honor prefers-reduced-motion: reduce by clamping all
   transitions and animations down to a near-instant duration.
   Using 0.01ms rather than 0 because some browsers cancel
   animation events entirely at duration:0, breaking JS that
   listens for transitionend / animationend.

   Smooth scrolling is also disabled — instant jumps only. */

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   SUMMARY
   ------------------------------------------------------------
   What's in this file:
     §1  Modern reset — box-sizing, margin/padding zeroing,
         media defaults (img/svg/video as block, max-width),
         table border-collapse.
     §2  HTML/body defaults — DM Sans body, --color-text on
         --color-bg-off, antialiased rendering, smooth
         scrolling.
     §3  Base typography — h1–h6 use Bricolage Grotesque with
         the appropriate font-size/line-height/letter-spacing
         tokens; paragraphs, lists, links, code, blockquote,
         hr, ::selection.
     §4  Form element resets — button/input/textarea/select
         stripped to a clean baseline, placeholder color
         normalized, fieldset/legend zeroed.
     §5  Global :focus-visible — 2px outline in --color-action
         with 2px offset.
     §6  Reduced motion — clamps transitions/animations to
         0.01ms, disables smooth scroll.

   Decisions almost made differently:
     - Considered adding `font-size: 16px` (or `100%`) to
       html as a rem-anchor. Skipped because the project
       uses px throughout the type scale; a rem anchor would
       imply rem-based sizing that doesn't exist yet.
     - Considered `text-wrap: balance` on h1/h2 for nicer
       headline wrapping. Skipped — browser support is
       improving but uneven; let components opt in.
     - Considered using `-webkit-tap-highlight-color:
         transparent` on body to kill the iOS tap flash.
       Skipped — components.css can do this on specific
       interactive surfaces; killing it globally affects
       links inside arbitrary content where the flash is
       useful feedback.
     - Considered including a base `font-feature-settings`
       block for tabular figures or stylistic alternates.
       Skipped — the type scale doesn't call for it, and
       per-element opt-in (components/utilities) is cleaner.
     - Considered adding default styling to <table>, <th>,
       <td>. Skipped — table styling is component territory
       (data tables are visually distinct and lengthy);
       base.css only resets `border-collapse`.

   Conflicts / overlaps flagged:
     1. layout.css §1 "Base reset" duplicates html/body
        height:100%, margin:0, padding:0, body background,
        color, font-family, font-size, line-height,
        -webkit-font-smoothing, and adds overflow:hidden plus
        a .body--scrollable opt-out.
        Resolution: base.css owns the typographic + color
        defaults (so unclassed pages render correctly without
        layout.css loaded). layout.css owns the shell-specific
        behavior (height:100%, overflow:hidden,
        .body--scrollable). The duplicated declarations are
        intentional — base.css must stand alone.
        Recommended load order: tokens → base → layout →
        components → utilities.

     2. components.css buttons (.btn:focus-visible) use a
        3px box-shadow ring (`0 0 0 3px var(--color-focus-ring)`).
        base.css §5 specifies a 2px outline ring globally.
        These do not conflict in practice because
        .btn:focus-visible explicitly sets `outline: 0` before
        applying its box-shadow ring, so the component wins on
        buttons. The prompt's "2px ring app-wide" is honored
        as the default; components are free to replace it
        (and components.css does so for buttons, modals,
        etc.).

     3. The prompt says the focus ring uses
        --color-focus-ring (which is rgba(37, 99, 235, 0.12),
        a fill color used for the 3px halo box-shadow pattern
        in components.css). For a 2px solid outline that token
        is too transparent to see. base.css uses --color-action
        (the solid blue) for the outline and reserves
        --color-focus-ring for the box-shadow halo pattern
        used by components. Calling this out explicitly:
        --color-focus-ring is a halo-fill token, not an
        outline-stroke token.
   ============================================================ */