/* Explain: Theme design tokens (colors, fonts) — single source of truth. */
:root {
    /* Brand colours */
    --primary-color: #0f766e;
    --primary-hover: #0b5c56;
    --primary-deep: #0a3f3b;
    --primary-soft: #e3f2ef;
    --secondary-color: #0f2f3d;
    --accent-color: #f59e0b;
    --accent-soft: #fef3c7;

    /* Surfaces & text */
    --background-color: #ffffff;
    --surface-color: #f3f8f7;
    --surface-strong: #e6f1ef;
    --text-color: #0d2027;
    --text-muted: #5b7180;
    --border-color: #dbe8e6;

    /* Status */
    --success-color: #16a34a;
    --danger-color: #dc2626;

    /* Typography — Arabic-capable families */
    --font-heading: 'Tajawal', 'Cairo', 'Segoe UI', sans-serif;
    --font-body: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif;

    /* Shape & depth */
    --app-radius-sm: 10px;
    --app-radius-md: 16px;
    --app-radius-lg: 26px;
    --app-shadow-sm: 0 6px 18px -12px rgba(10, 63, 59, 0.45);
    --app-shadow-md: 0 16px 38px -22px rgba(10, 63, 59, 0.42);
    --app-shadow-lg: 0 30px 60px -34px rgba(10, 63, 59, 0.5);
}