/* Hala-Kids · طين brand tokens (locked 2026-10-20). Generated from tokens.json; do not hand-edit values. */
@font-face { font-family: 'Marhey'; src: url('./fonts/hk-marhey-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Marhey'; src: url('./fonts/hk-marhey-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('./fonts/hk-almarai-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('./fonts/hk-almarai-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('./fonts/hk-almarai-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  --surface: #F8EFE4; /* Kiln cream. Page background for app screens, the site and social posts. */
  --surface-raised: #FFFDF9; /* Paper. Cards, printable sheets, inputs and anything that sits on surface. */
  --surface-sunken: #EAD3BF; /* Adobe. Panels, clay-grain areas, secondary buttons, neutral tags. Text on it: ink, ink-muted or kiln-shadow only. */
  --line: #E3D5C4; /* Hairlines and card edges. Decorative only: never the only edge of a control (use ink-muted for control borders). */
  --ink: #2E2A27; /* Charcoal. Body text and headings on surface (12.5:1), surface-raised (14:1), surface-sunken (9.9:1) and straw (7.1:1). */
  --ink-muted: #6B5A4E; /* Secondary text, captions and control borders on surface (5.8:1), surface-raised (6.5:1) and surface-sunken (4.6:1). */
  --terracotta: #B5552F; /* Brand clay. The seal, large shapes and illustration. As text only at 24px+ on surface (4.3:1) or surface-raised (4.8:1). */
  --terracotta-deep: #A04A29; /* Text-safe terracotta: hero slogans, links, the primary button fill. 5.3:1 on surface, 5.9:1 on surface-raised. On surface-sunken use kiln-shadow. */
  --kiln-shadow: #8F3F1F; /* The seal's shadow, the primary button's pressed edge, terracotta text on surface-sunken (5.0:1). */
  --ember: #CF7A52; /* The seal's inner ring and warm illustration highlights. Never text. */
  --straw: #D9B26A; /* Straw fibres, highlights, stickers, the clay-grain accent. Never text; ink on a straw fill. */
  --straw-soft: #F6E8C8; /* Tinted background behind straw-ink text (gentle notices). */
  --straw-ink: #7A5A1A; /* Text on straw-soft (5.2:1) and surface (5.6:1). */
  --olive: #6E7A3A; /* Second brand colour: the app icon ground, illustration greenery, success fills. Cream text on it only at 24px+ (4.1:1). */
  --olive-deep: #5B652F; /* Olive as text on surface (5.5:1), surface-raised (6.2:1) and olive-soft (5.0:1); success states. */
  --olive-soft: #E6E8D2; /* Tinted background behind olive-deep text. */
  --on-terracotta: #F8EFE4; /* Text and icons on terracotta-deep (5.3:1), kiln-shadow (6.4:1) and olive-deep (5.5:1) fills. Never on plain terracotta below 24px. */
  --focus: #2E2A27; /* Keyboard focus ring: 2px solid, 2px offset in the surface colour. At least 9.8:1 on every surface. */
  --link: #A04A29; /* Links on surface and surface-raised; an alias of terracotta-deep. */
  --font-display: Marhey, "Noto Kufi Arabic", Tahoma, sans-serif;
  --font-text: Almarai, Tajawal, "Noto Sans Arabic", Tahoma, sans-serif;
  --font-teach: "Noto Naskh Arabic", "Times New Roman", serif;
  --space-1: 4px; /* Icon to label. */
  --space-2: 8px; /* Inside tags and between tight items. */
  --space-3: 12px; /* Between related lines and buttons in a row. */
  --space-4: 16px; /* Card padding on phones; the minimum page gutter. */
  --space-5: 24px; /* Card padding on tablets; between cards. */
  --space-6: 32px; /* Between sections. */
  --space-7: 48px; /* Poster and post margins. */
  --space-8: 64px; /* Hero breathing room. */
  --radius-sm: 6px; /* Printable sheets and small chips. */
  --radius-md: 12px; /* Buttons, cards, inputs. */
  --radius-lg: 22px; /* Panels, place tiles, post frames, app sheets. */
  --radius-pill: 999px; /* Tags and step numbers. */
  --shadow-press: 0 3px 0 #8f3f1f; /* The primary button at rest: a pressed-clay edge, not a blur. */
  --shadow-press-active: 0 1px 0 #8f3f1f; /* The primary button while pressed. */
  --shadow-edge: 0 2px 0 #e3d5c4; /* Cards and place tiles on surface. No blurred drop shadows anywhere. */
  --touch-min: 48px; /* Minimum height and width of any control. */
  --touch-kid: 56px; /* Controls in screens for ages 3 to 5. */
}
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 76px; font-weight: 600; }
.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 54px; font-weight: 600; }
.display-md { font-family: var(--font-display); font-size: 32px; line-height: 44px; font-weight: 600; }
.title { font-family: var(--font-display); font-size: 24px; line-height: 34px; font-weight: 600; }
.heading { font-family: var(--font-text); font-size: 20px; line-height: 30px; font-weight: 800; }
.body-lg { font-family: var(--font-text); font-size: 18px; line-height: 31px; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 27px; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 16px; line-height: 22px; font-weight: 700; }
.small { font-family: var(--font-text); font-size: 13px; line-height: 21px; font-weight: 400; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 18px; font-weight: 700; }
.teach-letter { font-family: var(--font-teach); font-size: 80px; line-height: 144px; font-weight: 500; }
.teach-word { font-family: var(--font-teach); font-size: 44px; line-height: 80px; font-weight: 500; }