/* ╔═══════════════════════════════════════════════════════════════╗
   ║  Base Styles — Typography, Scrollbar, Accessibility           ║
   ║  Adapted from: ezhard-ezhaul/src/styles/global.css            ║
   ║  Uses design tokens from variables.css.                       ║
   ╚═══════════════════════════════════════════════════════════════╝ */

@layer base {

  /* ── Root typography & background ──────────────────────────── */
  body {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-body-size);
    font-weight: var(--md-sys-typescale-body-weight);
    line-height: 1.6;
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface);
  }

  /* ── Typography utility classes ────────────────────────────── */
  .display {
    font-family: var(--md-sys-typescale-display-font);
    font-size: var(--md-sys-typescale-display-size);
    font-weight: var(--md-sys-typescale-display-weight);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .headline {
    font-family: var(--md-sys-typescale-display-font);
    font-size: var(--md-sys-typescale-headline-size);
    font-weight: var(--md-sys-typescale-headline-weight);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .title-large {
    font-family: var(--md-sys-typescale-display-font);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    line-height: 1.3;
  }

  .title-medium {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    line-height: 1.4;
  }

  .body {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-body-size);
    font-weight: var(--md-sys-typescale-body-weight);
    line-height: 1.6;
  }

  .body-small {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-body-small-size);
    font-weight: var(--md-sys-typescale-body-small-weight);
    line-height: 1.5;
  }

  .label {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-label-size);
    font-weight: var(--md-sys-typescale-label-weight);
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  .label-small {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ── Script-specific font adjustments ──────────────────────── */
  [lang="he"] body {
    font-size: calc(var(--md-sys-typescale-body-size) * 1.02);
    line-height: 1.5;
  }

  [lang="ar"] body {
    font-size: calc(var(--md-sys-typescale-body-size) * 1.05);
    line-height: 1.6;
  }

  /* ── Selection ──────────────────────────────────────────────── */
  ::selection {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
  }

  /* ── Scrollbar (WebKit) ─────────────────────────────────────── */
  ::-webkit-scrollbar {
    inline-size: 8px;
    block-size: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface-container-lowest);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
  }

  /* ── Scrollbar (Firefox) ────────────────────────────────────── */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) var(--md-sys-color-surface-container-lowest);
  }

  /* ── Skip to content (accessibility) ────────────────────────── */
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-weight: 600;
    z-index: 9999;
    transition: inset-block-start var(--md-motion-duration-short) var(--md-motion-easing-standard);
  }

  .skip-link:focus {
    inset-block-start: 0;
  }

  /* ── Visually hidden but accessible ─────────────────────────── */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}