/* Carta design tokens — ink 60 / ivory 30 / card red 10. Generated from the "Carta" design system (tokens.json). */

@font-face { font-family: 'Lalezar'; src: url('fonts/Lalezar-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('fonts/IBMPlexSansArabic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('fonts/IBMPlexSansArabic-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('fonts/IBMPlexSansArabic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ---------- color: 60 ink / 30 ivory / 10 red ---------- */
  --bg: #121216;
  --surface: #1D1D23;
  --surface-raised: #26262E;
  --line: #2E2E36;
  --line-strong: #74747E;
  --text: #F5F1E6;
  --text-muted: #A8A6A0;
  --red: #D0021B;
  --red-hover: #E01A32;
  --red-pressed: #B00018;
  --on-red: #FFFFFF;
  --red-text: #FF5A5F;
  --red-soft: #2A1216;
  --card-face: #F5F1E6;
  --card-face-shade: #E7E0CF;
  --card-ink: #121216;
  --card-ink-muted: #5C574B;
  --card-back: var(--red);
  --success: var(--text);
  --warning: var(--text);
  --info: var(--text);
  --error: var(--red-text);
  --status-soft: var(--surface-raised);
  --error-soft: var(--red-soft);
  --link: var(--text);
  --focus-ring: var(--text);
  --scrim: rgba(18, 18, 22, 0.8);

  /* ---------- type ---------- */
  --font-display: Lalezar, "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- spacing (4px base) ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ---------- radius ---------- */
  --radius-sm: 6px; --radius-md: 10px; --radius-card: 14px; --radius-lg: 16px; --radius-pill: 999px;

  /* ---------- shadow ---------- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 36px rgba(0, 0, 0, 0.55);
  --shadow-panel: 0 24px 48px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 2px #121216, 0 0 0 4px #F5F1E6;

  /* ---------- size ---------- */
  --touch-min: 44px;
  --control-h: 48px;
  --header-h: 64px;
  --container: 1216px;
  --card-w: 200px;
}

@media (max-width: 720px) {
  :root { --card-w: 164px; }
}

html { background: var(--bg); color-scheme: dark; }
body { background: var(--bg); }