/* Handraw website design tokens. Restyle the whole site from this file.
   Night theme inspired by the owner's references: deep navy sky, soft violet, campfire amber. */

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Night sky, from darkest to lightest */
  --night-950: #090c17;
  --night-900: #0e1222;
  --night-850: #121730;
  --night-800: #171d3a;
  --night-700: #20274a;
  --night-600: #2c3460;
  --horizon: #2a2453;            /* violet haze near the horizon */
  --forest: #0d1a1f;             /* tree silhouettes */
  --forest-light: #15282d;

  /* Text (all pass WCAG AA on --night-800 and darker) */
  --text: #eef0fa;
  --text-muted: #b4bad3;
  --text-faint: #8d94b3;

  /* Accents */
  --violet: #a99cff;             /* links, outlines, focus: 7:1 on --night-800 */
  --violet-strong: #6a58ee;      /* violet fills with white text: 4.9:1 */
  --violet-soft: rgba(169, 156, 255, 0.14);
  --amber: #ffb547;              /* campfire: primary buttons with dark text, 11:1 */
  --amber-hover: #ffc56e;
  --amber-glow: rgba(255, 181, 71, 0.28);
  --moon: #f4ecd0;
  --board: #fbfaf7;              /* the whiteboard, same as the demo video */
  --danger: #ff8f8f;
  --danger-soft: rgba(255, 143, 143, 0.12);
  --ok: #7be0b0;

  --line: rgba(238, 240, 250, 0.1);
  --line-strong: rgba(238, 240, 250, 0.22);

  /* Surfaces */
  --bg: var(--night-900);
  --bg-alt: var(--night-850);
  --surface: var(--night-800);
  --surface-2: var(--night-700);
  --input-bg: var(--night-950);

  /* The editor's accent colour, kept here if you want the app blue instead of violet */
  --editor-accent: #3b6ff5;

  /* Type */
  --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, 'Noto Sans Arabic', Roboto, Arial, sans-serif;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h1: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  --fs-h2: clamp(1.55rem, 1.2rem + 1.6vw, 2.3rem);
  --fs-h3: 1.15rem;
  --lh-body: 1.65;
  --lh-head: 1.25;

  /* Shape and space */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --container: 1120px;
  --gutter: 16px;
  --space-section: clamp(56px, 8vw, 104px);
}

:root:lang(ar) {
  --lh-body: 1.8;
  --lh-head: 1.45;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}