/* ═══════════════════════════════════════════════════════════
   AMCH Blog — design tokens
   Source of truth: the Team portal's Axiom UI design system
   (TEAM/app/assets/tailwind/application.css + crm/base/tokens.css).
   Night theme only. Text alphas are raised over Team's (.5 / .2) so that
   secondary and tertiary text pass WCAG AA on a public reading site.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --bg:              #0f1011;
  --surface:         #1b1e21;
  --surface-raised:  #303235;
  --surface-sunken:  #141618;

  /* ── Accent ── */
  --accent:          #1de227;
  --accent-light:    #5cff63;
  --accent-subtle:   rgba(29, 226, 39, 0.12);
  --tint:            rgba(29, 226, 39, 0.10);
  --border-accent:   rgba(29, 226, 39, 0.35);
  --on-accent:       #0f1011;

  /* ── Text ── */
  --text:            #f5f5f7;
  --text-body:       rgba(245, 245, 247, 0.82);  /* article prose: ≈12:1 */
  --text-secondary:  rgba(245, 245, 247, 0.66);  /* ≈7.9:1 */
  --text-tertiary:   rgba(245, 245, 247, 0.50);  /* ≈5:1 — the floor for small text */

  /* ── Lines ── */
  --border:          rgba(255, 255, 255, 0.08);
  --border-hover:    rgba(255, 255, 255, 0.15);
  --border-strong:   rgba(245, 245, 247, 0.16);

  /* ── Status ── */
  --error:           #ff3d3d;
  --success:         #00b67a;

  /* ── Type ── */
  --font-heading:    'RF Dewi Expanded', 'Gilroy', system-ui, sans-serif;
  --font-body:       'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  /* ── Line heights: in px on the 4px grid, one per size (the design system, 03:246) —
     12 → 16, 13–15 → 20 (reading 15 → 24), 16 → 24, 17–20 → 28 (reading 18–20 → 28–32),
     22 → 28, 24 → 32, 28–30 → 36 (tight headlines 32), 32 → 40, 40 → 48. Named by value. ── */
  --lh-16: 16px;
  --lh-20: 20px;
  --lh-24: 24px;
  --lh-28: 28px;
  --lh-32: 32px;
  --lh-36: 36px;
  --lh-40: 40px;
  --lh-48: 48px;

  /* ── Space (4px grid) ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ── Radii: AMCH's signature — only the top-left and bottom-right corners. Which one by
     the element's height (the design system's ADR-0016): ≤ 20 → --r-2xs, 24–40 → --r-xs,
     48–56 → --r-sm, 64 and up, cards and pictures → --r-lg. A container round a rounded
     element takes the inner radius plus the gap (--r-md 16 = 12 + 4, --r-3xl 32 = 20 + 12)
     — values off the scale, but derived, not chosen. ── */
  --r-2xs: 4px 0 4px 0;
  --r-xs:  8px 0 8px 0;
  --r-sm:  12px 0 12px 0;
  --r-md:  16px 0 16px 0;
  --r-lg:  20px 0 20px 0;
  --r-3xl: 32px 0 32px 0;
  /* A picture flush with a card's top: the card's corner on the top-left, the same radius
     on both bottom corners, the card showing in them (ADR-0016 §6, the app's Body / News). */
  --r-media-top: 20px 0 20px 20px;
  /* Controls: the signature pair by the element's height (the design system's ADR-0016) —
     ≤ 20 → 4, 24–40 → 8, 48–56 → 12 (its S / M), 64 and cards → 20, large cards → 40. A
     small element with a large radius turns into a drop. Nested corners follow the outer
     one (outer = inner + the gap), even off the scale. A field on its own has four equal
     corners (ADR-0010). */
  --r-control:   8px 0 8px 0;
  --r-control-l: 12px 0 12px 0;
  --r-field:     12px;

  /* ── Shadows & glow ── */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --sh-md: 0 4px 20px rgba(0, 0, 0, 0.30);
  --sh-card-hover: 0 8px 32px rgba(0, 0, 0, 0.40);
  --ring: 0 0 0 3px rgba(29, 226, 39, 0.12);
  /* Hover and press on a dark surface: white 4% / 8% over it (the design system, 03 §5). */
  --overlay-hover:   rgba(255, 255, 255, 0.04);
  --overlay-pressed: rgba(255, 255, 255, 0.08);

  /* ── Motion: the design system's steps and curves (03 §2.4, ADR-0014) ──
     100 a response to a press, 200 controls, 300 sheets and dialogs, 500 a screen's change —
     nothing longer. Entering and the user's own moves ease out; leaving is faster and eases
     in; a system move (a morph, a sliding thumb) eases in and out. */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:  cubic-bezier(0.7, 0, 0.84, 0);
  /* Shapes that morph (the header search): even acceleration both ways — --ease covers
     94% of the distance in the first third and reads as a jump. */
  --ease-morph: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:  100ms;
  --dur-2:  200ms;
  --dur-3:  300ms;
  --dur-4:  500ms;

  /* ── Layout ── */
  --container:      1200px;
  --gutter:         32px;
  --article-width:  720px;
  --header-height:  64px;       /* Team: h-16 */
  /* The header's bottom corners. Not 80: a 64px header clamps it to 64, and the curve
     would clip a logo standing 16px from the screen edge; 40 (28 on a phone) leaves the
     logo 11px clear of the curve at either gutter. */
  --header-radius:  40px;
}

/* The asymmetric corners mirror in right-to-left languages (ar, he). */
[dir="rtl"] {
  --r-2xs: 0 4px 0 4px;
  --r-xs:  0 8px 0 8px;
  --r-sm:  0 12px 0 12px;
  --r-md:  0 16px 0 16px;
  --r-lg:  0 20px 0 20px;
  --r-3xl: 0 32px 0 32px;
  --r-media-top: 0 20px 20px 20px;
  --r-control:   0 8px 0 8px;
  --r-control-l: 0 12px 0 12px;
}

@media (max-width: 768px) {
  :root { --gutter: 16px; --header-radius: 28px; }
}

/* ── Day palette for a surface on the night page ──
   The feed's bottom bar and its filter dialog are light, to stand out from the dark page:
   dark on dark, the bar went unnoticed. These are Axiom's day values (TEAM
   application.css, [data-theme="day"]), assigned by role: --surface stays the step nearest
   the background and --surface-raised the farther one, as at night. The accent turns to
   the day's deep green #007605 — fills included: the night #1de227 on a light surface mixed
   the two themes. On a light surface an accent button is that deep green with light text
   (the design system's ADR-0019): 5.4:1, where white on the brighter #08a110 was 3.1:1.
   Shadows stay as they are, because the page around the bar is still dark. */
.theme-day {
  --bg:              #f5f5f7;
  --surface:         #e6e9ed;
  --surface-raised:  #d3d8de;
  --surface-sunken:  #edeef0;

  --accent:          #007605;
  --on-accent:       #f5f5f7;
  --accent-subtle:   rgba(0, 118, 5, 0.10);
  --tint:            rgba(0, 118, 5, 0.12);
  --border-accent:   rgba(0, 118, 5, 0.40);

  --text:            #0f1011;
  --text-body:       rgba(15, 16, 17, 0.82);
  --text-secondary:  rgba(15, 16, 17, 0.72);
  --text-tertiary:   rgba(15, 16, 17, 0.62);  /* ≈5:1 on #f5f5f7; Axiom's .55 is ≈4.2 */

  --border:          rgba(0, 0, 0, 0.10);
  --border-hover:    rgba(0, 0, 0, 0.20);
  --border-strong:   rgba(0, 0, 0, 0.16);

  color: var(--text);
}