/* ===========================================================================
   TYPOGRAPHY - AttuneEHR Design System

   Originally scoped to the Tasks pages only, now loaded globally (see
   layouts/application.html.erb) since the task edit modal can open from
   any page. Copied from the Claude Design project.

   ---------------------------------------------------------------------
   THIS FILE IS THE ONE THAT WINS, and that is the reason the Modern
   Editorial faces are set here rather than only in Tailwind's @theme.

   Tailwind v4 emits its theme variables inside `@layer theme`, and
   UNLAYERED CSS BEATS LAYERED CSS regardless of source order. This file
   is unlayered, so its :root declarations override Tailwind's wherever
   it is linked -- no matter which <link> comes first. That is not a
   theory: before this change, Tailwind declared `--font-sans: 'Inter'`
   and the practitioner app still computed the plain system stack on
   every page, because this file said so. Only the auth layout got Inter,
   and only because it did not link this file at all.

   So the app had two different declared fonts depending on which layout
   you were in, and a comment in layouts/application.html.erb explaining
   the effect by <link> order, which was the wrong cause.

   The faces live here. Tailwind's @theme mirrors them so the font-sans
   and font-serif UTILITIES resolve to the same thing -- see
   app/assets/tailwind/application.css. Both have to be changed together;
   changing only one is how this drifted in the first place.
   =========================================================================== */
:root {
  /* Inter for everything a person reads at length or interacts with. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji", sans-serif;

  /* Newsreader for display and headings ONLY.
     ==========================================
     NOT a stylistic boundary -- an accessibility one. Serif faces
     measurably disadvantage dyslexic and low-vision readers at body
     sizes, and this is an app clinicians read at the end of a day of
     sessions. A serif heading is a moment of voice; a serif progress
     note is a tax on every reader who is already tired.

     So this variable is deliberately NOT applied to body, labels,
     inputs, buttons, tables or any clinical text. It is applied by the
     base-layer rules below (real heading elements) and by the .display
     class for card titles that are not headings. Nothing else should
     reach for it. */
  --font-serif: 'Newsreader', ui-serif, Georgia, Cambria, "Times New Roman", serif;

  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  /* Added for the editorial scale: display sizes the old scale stopped
     short of. A heading that is only one step above body does not read
     as deliberate, it reads as bold body text. */
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* The editorial heading weight. Newsreader at 500 is the whole point of
     the direction: larger and LIGHTER than the 700 sans it replaces, so
     size carries the hierarchy instead of weight. */
  --weight-display:  500;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-widest: 0.1em;
}

/* ===========================================================================
   THE SCALE, APPLIED

   Through base-layer element rules rather than 250 hand-edited class
   strings, so it reaches views nobody thought to touch and cannot drift
   one heading at a time.

   @layer base is deliberate: it puts these BELOW Tailwind utilities in
   the cascade, so any view that has already chosen its own size or
   weight keeps it. A heading that says text-2xl font-bold still renders
   at text-2xl and 700 -- it simply renders in Newsreader now. The
   family is what this refresh is imposing; the per-view sizing that
   already exists is left alone, because overriding it is how a type
   change turns into a layout regression.
   =========================================================================== */
@layer base {
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
    /* Newsreader sets slightly wide by default at display sizes. */
    letter-spacing: var(--tracking-tight);
  }

  /* Sizes only where the element has no opinion of its own. Most of this
     app's headings carry a text-* utility, which wins; these are the
     floor for the ones that do not, so an unstyled <h1> is not left at
     the browser's 2em default in a serif. */
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }
  h5, h6 { font-size: var(--text-base); }

  /* Everything else is Inter, stated explicitly rather than inherited,
     because ActionText and Quill both inject content into containers
     that would otherwise pick up a heading's family. */
  body, input, select, textarea, button {
    font-family: var(--font-sans);
  }
}

/* ===========================================================================
   .display -- the editorial face for text that is NOT a heading element

   Card titles, the typed brand wordmark, the "Log in" title on the auth
   card. These are often <p> or <span> for good structural reasons (a
   card title inside a list is not a document section), so they cannot be
   reached by the element rules above.

   Unlayered on purpose. This is opt-in per element, so unlike the base
   rules it SHOULD beat a stray font-sans utility -- if a view asks for
   .display it means it.
   =========================================================================== */
.display {
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-tight);
}

/* The typed brand wordmark -- "Attune" as text, in the sidebar and the
   portal header. NOT the logo: app/assets/images/attune-wordmark.svg is
   outlined paths, not live text, and is left exactly as it was. */
.wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-normal);
}