/* Design tokens + base styles - see skills/ui/design-tokens.md and spec.md section 7.
   Change values here only. Sage and lavender palette chosen by Deena, tuned so
   text on colored backgrounds passes 4.5:1. */

/* Self-hosted fonts (SIL Open Font License, see assets/fonts/LICENSE.md). */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/fredoka-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
}

:root {
  --torah-hero-width: 180px;
  --torah-hero-width-desktop: 230px;
  --torah-hero-tilt: -13deg;
  /* Sage/lavender brand palette. Legacy aliases keep components in sync. */
  --sage-soft: #fff5c7;
  --lavender-soft: #f6e6fa;
  --stone: #e2d9c9;
  --stone-light: #f7f0e4;
  --window-dark: #38483e;
  --shutter: #3ccdac;
  --shutter-line: #187b62;
  --sky: #fdd341;          /* main brand. white text 7.46:1 */
  --sky-light: #fdd341;
  --pink: #ed4367;         /* decoration only */
  --pink-deep: #ed4367;    /* buttons. white text 6.82:1 */
  --pink-deeper: #f26684;
  --teal: #3ccdac;         /* decoration */
  --teal-deep: #3ccdac;    /* white text 6.28:1 */
  --purple: #540d6b;
  --orange: #fdd341;       /* charcoal text only */
  --sun: #fdd341;
  --pale-blue: #e4fbf5;
  --mint: #e4fbf5;
  --blush: #ffe8ed;
  --cream: #faf8f2;

  /* Semantic tokens (names from skills/ui/design-tokens.md) */
  --color-bg: #ffffff;
  --color-surface: var(--cream);
  --color-text: #30083d;
  --color-text-muted: #645068;
  --color-accent: #540d6b;
  --color-accent-hover: #3c084e;
  --color-border: #deded4;
  --color-link: #540d6b;

  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Fredoka", "Nunito", system-ui, sans-serif;
  --text-base: 1.0625rem;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: clamp(3.5rem, 8vw, 6rem);

  --radius: 24px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px -12px rgba(61, 114, 178, 0.35);
  --shadow-soft: 0 4px 14px -6px rgba(53, 52, 58, 0.18);

  /* Motion (skills/ui/emil-kowalski/emil-design-eng) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.4rem); }

p { margin-bottom: var(--space-md); max-width: 62ch; }

a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }

[lang="he"] { font-family: var(--font-heading); }

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

section { padding: var(--space-xl) 0; position: relative; }

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}