@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {

  /* Spacing scale (4-based) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /* Radii — Apple-style softer rounding */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Thmanyah Serif Display", "Tajawal", "Cairo", "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: -0.005em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* Apple-style easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 540ms;

  /* Story canvas */
  --canvas-aspect: 9 / 16;
  --story-base-width: 1080px;

  /* Layout */
  --header-h: 44px;
  --sidebar-w: 380px;
}

[data-theme="dark"] {
  /* Apple-grade dark surfaces — slightly warm, soft */
  --bg-app: #0b0b0f;
  --bg-elevated: #15151c;
  --bg-panel: #111118;
  --bg-input: #1c1c25;
  --bg-input-hover: #232330;
  --bg-stage: radial-gradient(ellipse 90% 60% at 50% 0%, #1a1a25 0%, #0b0b0f 100%);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-strong: rgba(255, 255, 255, 0.08);

  /* Text — Apple neutral scale */
  --fg-primary: #f5f5f7;
  --fg-secondary: #b4b4c0;
  --fg-tertiary: #86868b;
  --fg-quaternary: #4a4a52;
  --fg-on-accent: #ffffff;

  /* Borders — barely-there */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus: rgba(0, 113, 227, 0.5);

  /* Accent (neutral hover/active for non-brand surfaces) */
  --accent: #f5f5f7;
  --accent-soft: rgba(255, 255, 255, 0.06);
  --accent-hover: rgba(255, 255, 255, 0.10);
  --accent-active: rgba(255, 255, 255, 0.14);

  /* Brand — Apple Primary Action Blue */
  --brand: #0071E3;
  --brand-hover: #006EDB;
  --brand-active: #0076DF;
  --brand-soft: rgba(0, 113, 227, 0.12);
  --brand-fg: #ffffff;

  /* Semantic */
  --success: #30d158;
  --warning: #ffd60a;
  --danger: #ff453a;
  --info: #64d2ff;

  /* Apple-grade shadows — soft, layered, not harsh */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-4: 0 16px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-5: 0 32px 64px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35);

  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-focus-ring: 0 0 0 3px rgba(0, 113, 227, 0.25);
  --shadow-glow: 0 0 0 1px var(--border-default);

  /* Phone frame */
  --phone-bezel: linear-gradient(135deg, #2a2a35 0%, #16161e 50%, #0b0b0f 100%);
  --phone-bezel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 30px 80px -10px rgba(0, 0, 0, 0.65),
    0 12px 32px -8px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
  --bg-app: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #f0f0f3;
  --bg-input-hover: #e8e8eb;
  --bg-stage: radial-gradient(ellipse 90% 60% at 50% 0%, #ffffff 0%, #EDEDF2 100%);
  --bg-glass: rgba(0, 0, 0, 0.03);
  --bg-glass-strong: rgba(0, 0, 0, 0.06);

  /* Apple neutral text scale */
  --fg-primary: #1D1D1F;
  --fg-secondary: #333336;
  --fg-tertiary: #6E6E73;
  --fg-quaternary: #b4b4b9;
  --fg-on-accent: #ffffff;

  --border-subtle: #EDEDF2;
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.15);
  --border-focus: rgba(0, 113, 227, 0.5);

  --accent: #1D1D1F;
  --accent-soft: rgba(0, 0, 0, 0.04);
  --accent-hover: rgba(0, 0, 0, 0.06);
  --accent-active: rgba(0, 0, 0, 0.08);

  /* Brand — Apple Primary Action Blue */
  --brand: #0071E3;
  --brand-hover: #006EDB;
  --brand-active: #0076DF;
  --brand-soft: rgba(0, 113, 227, 0.08);
  --brand-fg: #ffffff;

  --success: #34c759;
  --warning: #ff9500;
  --danger: #ff3b30;
  --info: #007aff;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-4: 0 16px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-5: 0 32px 64px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);

  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-focus-ring: 0 0 0 3px rgba(0, 113, 227, 0.15);
  --shadow-glow: 0 0 0 1px var(--border-default);

  --phone-bezel: linear-gradient(135deg, #2c2c34 0%, #1a1a22 50%, #0b0b10 100%);
  --phone-bezel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 24px 60px -10px rgba(0, 0, 0, 0.25),
    0 8px 20px -8px rgba(0, 0, 0, 0.15);
}