/* ==========================================================================
   Julius UI foundation layer — julius-base.css
   --------------------------------------------------------------------------
   Task:         TASK-2 (Add additive design tokens and the component base sheet)
   Requirements: REQ-16 (design tokens and contrast)
                 REQ-17 (design system and component library)
   Feature:      FEAT-1
   Tokens:       julius/css/variables.css (additive :root block)

   SAFETY / INERTNESS
   ------------------
   This is the foundation (opt-in scope root + utilities) layer of the Julius
   redesign. It is loaded from every shell's <h:head> but is COMPLETELY INERT
   on today's pages: every selector below is scoped to a `.julius-*` class that
   no existing page markup currently carries, so loading this sheet must not
   change the rendering of any current page.

   Component classes (`.julius-btn`, `.julius-field`, `.julius-input`,
   `.julius-select`, `.julius-checkbox`, `.julius-radio`, `.julius-switch`,
   `.julius-card`, `.julius-table`, `.julius-messages`, `.julius-badge`,
   `.julius-tabs`, `.julius-dialog`, `.julius-empty`)
   intentionally live in `julius-components.css` and belong to TASK-3. They are
   NOT defined here.

   RESERVED — never redefine these in this file: `.julius-send-btn` and
   `.julius-mic-btn` already exist as inline styles in `baseprivileged.jspx`,
   `basepublic.jspx` and `chatContent.jspx`, and are in active use.

   Accessibility: WCAG 2.1 AA / EN 301 549
   (single source of truth: docs/ficus/esteettomyys-ohjeet.md).

   LOAD ORDER
   ----------
   This sheet is loaded BEFORE `skin.css` / `activesoft.css`. Equal-specificity
   `.julius-*` rules added later must therefore rely on `.julius-scope`
   specificity or a later load position; components are expected to load after
   the skins (TASK-3 / TASK-16).

   TOKEN DEPENDENCY
   ----------------
   This sheet references tokens defined in `variables.css`. Both `variables.css`
   and `julius-base.css` are loaded by all shells that use this sheet, including
   `admin.jspx`, so the tokens are always resolved.
   ========================================================================== */

/* ==========================================================================
   1. Opt-in scope root — box-sizing reset + type baseline
   Wrap redesigned markup in `.julius-scope`; nothing outside it is touched.
   ========================================================================== */
.julius-scope,
.julius-scope *,
.julius-scope *::before,
.julius-scope *::after {
  box-sizing: border-box;
}

.julius-scope {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
}

/* ==========================================================================
   2. Scoped focus indicator — WCAG 2.4.7
   One focus style within the scope root: 2px primary outline, 3px offset (02-design-system §1).
   ========================================================================== */
.julius-scope :focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   3. Scoped link styles

   Link colour (--c-primary) is distinguished from body text (--c-text) by
   colour alone at 2.44:1, which is below the 3:1 WCAG 1.4.1 / G183 bar for
   colour-only distinction. This is a deliberate token-consistency choice with
   the design-system prototype (wireframes/wireframes.css:66-67). Hover underline
   and the :focus-visible outline cover pointer and keyboard use, but the
   colour-only distinction for links (WCAG 1.4.1) must be validated by
   TASK-13 / BUILD-13 (accessibility audit), which may add
   `text-decoration: underline` for body-text links.
   ========================================================================== */
.julius-scope a {
  color: var(--c-primary);
  text-decoration: none;
}

.julius-scope a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   4. Scoped typography scale (02-design-system §2)
   ========================================================================== */
.julius-scope h1,
.julius-scope h2,
.julius-scope h3,
.julius-scope h4 {
  font-family: var(--ff-display);
  line-height: 1.25;
  color: var(--c-primary-dk);
}

.julius-scope h1 {
  font-size: 1.5rem;
  font-weight: 800;
}

/* TASK-102 / REQ-161: dock/booking page titles are often one unbroken product
   name. `min-width: 0` lets the flex header shrink below the title's intrinsic
   width and `overflow-wrap: anywhere` breaks a long token inside the column
   instead of pushing the page sideways (WCAG 1.4.10). Two classes plus the
   child combinator outrank the single-class `.julius-scope h1` above, so the
   mobile size/line-height below win. */
.julius-scope .julius-page-header > h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .julius-scope .julius-page-header > h1 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
}

.julius-scope h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

.julius-scope h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.julius-scope h4 {
  font-size: 1rem;
  font-weight: 700;
}

.julius-scope p {
  max-width: var(--content-w);
}

/* ==========================================================================
   5. Utilities (standalone `.julius-*` classes)
   ========================================================================== */

/* Visually hidden but available to assistive technology (WCAG-compatible) */
.julius-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Centred content column at the shared sheet width (02-design-system §3) */
.julius-container {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 1rem;
}

/* TASK-102 / REQ-161: the shared container loses one spacing step of side
   gutter at phone width (16px -> 12px), so `.julius-main`'s tighter padding
   actually reaches the text at 320px (WCAG 1.4.10). Scoped to the phone so the
   desktop measure is unchanged. */
@media (max-width: 720px) {
  .julius-container {
    padding: 0 0.75rem;
  }
}

/* Vertical rhythm between sibling blocks */
.julius-stack > * + * {
  margin-top: var(--sp-4);
}

/* Wrapping flex row of items aligned on their centre line */
.julius-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

/* Secondary / muted text */
.julius-muted {
  color: var(--c-text-3);
}

/* Small body text (02-design-system §2) */
.julius-small {
  font-size: 0.85rem;
}

/* ==========================================================================
   6. Reduced-motion guard — honour prefers-reduced-motion (§1)
   Effectively zero out animation/transition durations for scoped content.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .julius-scope *,
  .julius-scope *::before,
  .julius-scope *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}