/* auth_editorial.css — editorial tokens + fonts for Devise auth pages.
 *
 * Loaded ONLY on Devise controller pages (devise_controller? gate in layout),
 * via the Rails asset pipeline (Propshaft), so it is available in ALL
 * environments including RAILS_ENV=test (where the Vite bundle is suppressed
 * by the unless Rails.env.test? gate in application.html.erb).
 *
 * Source of truth for token values: app/javascript/styles/design-system/colors_and_type.css.
 * Copy values VERBATIM — do NOT diverge from the Vite design system.
 */

/* ── Self-hosted variable fonts ──────────────────────────────────────────────
   Propshaft sweeps CSS url() references and fingerprints the target files.
   The bare filenames resolve against the asset load path (app/assets/fonts is
   on the path via the default Propshaft paths), producing fingerprinted URLs
   like /assets/eb-garamond-latin-wght-normal-<digest>.woff2 in the compiled output.
   font-display: swap matches the @fontsource-variable default. */

@font-face {
  font-family: 'EB Garamond Variable';
  src: url("/assets/eb-garamond-latin-wght-normal-01648bf7.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  src: url("/assets/jetbrains-mono-latin-wght-normal-7c88d0cc.woff2") format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Variable';
  src: url("/assets/inter-latin-wght-normal-1f021a24.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Editorial design tokens (auth subset) ───────────────────────────────────
   Only the tokens actually referenced in the 5 auth ERB files are declared here.
   Values copied VERBATIM from colors_and_type.css. */

:root {
  /* ── Color: paper + ink ──────────────────────────────────────────────── */
  --paper: #f6f4ee;
  --paper-soft: #efece2;
  --ink: #1a1a17;
  --ink-2: #3a3934;
  --ink-strong: #4a4845;
  --ink-mute: #5a584f;
  --ink-fade-18: rgba(26, 26, 23, 0.18);
  --ink-fade-40: rgba(26, 26, 23, 0.4);

  /* ── Accent ──────────────────────────────────────────────────────────── */
  --accent: #a83a2c;
  --accent-soft: rgba(168, 58, 44, 0.04);

  /* ── Type families ───────────────────────────────────────────────────── */
  --serif:
    'EB Garamond Variable', 'EB Garamond Fallback', Georgia, 'Times New Roman',
    serif;
  --mono:
    'JetBrains Mono Variable', 'JetBrains Mono Fallback', ui-monospace,
    'SF Mono', Menlo, monospace;
  --sans: 'Inter Variable', system-ui, -apple-system, sans-serif;

  /* ── Type scale ──────────────────────────────────────────────────────── */
  --t-headline: 22px;
  --t-body: 15px;
  --t-body-s: 13px;
  --t-caption: 11px;
  --t-kicker: 10.5px;
  --t-tiny: 10px;

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 22px;
  --s-6: 28px;
  --s-7: 36px;

  /* ── Page margins ────────────────────────────────────────────────────── */
  --page-px: 36px;

  /* ── Borders / hairlines ─────────────────────────────────────────────── */
  --rule-thin: 1px solid var(--ink);
  --rule-hair: 1px solid var(--ink-fade-18);

  /* ── Letter-spacing ──────────────────────────────────────────────────── */
  --tracking-tight: -0.025em;
  --tracking-wide: 0.14em;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --motion-fast: 120ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Utility classes used in auth views ──────────────────────────────────────
   Copied VERBATIM from colors_and_type.css so class="kicker" and
   class="kicker kicker--accent" render correctly in RAILS_ENV=test. */

.kicker {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-kicker);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-strong);
}

.kicker--accent {
  color: var(--accent);
}

/* ── Interaction states ──────────────────────────────────────────────────────
   Inline style= attributes cannot express pseudo-classes, so hover rules live
   here (loaded only on auth pages). The CTA inline `transition` references these. */

input[type='submit']:hover,
button[type='submit']:hover {
  background: var(--ink-2);
}

a:hover {
  color: var(--ink-2);
  text-decoration-color: var(--ink-fade-40);
}

/* ── Responsive page margin ──────────────────────────────────────────────────
   Contract --page-px from 36px to 16px on small viewports so the auth shell +
   form container do not double-apply 36px horizontal padding on mobile. */

@media (width <= 639px) {
  :root {
    --page-px: 16px;
  }
}