/* ═══════════════════════════════════════════════════════════════════════════
   Wissal design system «دفتر وصال» — phase 1 (owner approved 2026-11-02).
   Mockups + audit: research/design-audit-2026-11/ (تقرير المصمم.md).

   Loaded by layouts/app.blade.php AFTER Bootstrap + app-custom.css, so it re-tunes
   Bootstrap's own variables: every btn-primary / bg-primary / text-primary / card on
   the site takes the system at once, with no change to any page.

   Rules: petrol #0C3E4D = structure; ONE orange #F07032 = action / "now";
   data colours only with a word; radii 6 / 10 only; no shadow on cards.
   Age stages (owner 2026-11-02 «لا تخلي صغار مثل الكبار»): <body data-stage>
   = young (KG–Y3) | mid (Y4–7) | older (Y8+) | staff — same mapping as AdventureSkin.
   Exam screens carry data-exam: font + size stay as they were (Tahoma, owner rule).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --petrol-900: #082C37;
    --petrol: #0C3E4D;
    --petrol-600: #2F5F6C;
    --petrol-100: #E3ECEE;
    --petrol-50: #F1F5F6;
    --orange: #F07032;
    --orange-700: #C4521C;
    --orange-50: #FDEEE6;
    --ink: #142A31;
    --ink-2: #4B6169;
    --ink-3: #7D9097;
    --line: #DCE4E6;
    --line-2: #ECF1F2;
    --page: #F6F8F8;
    --above: #2E7D4F;
    --inline: #B7791F;
    --below: #B93A2B;

    --ui: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
    --book: 'Noto Naskh Arabic', 'IBM Plex Serif', serif;
    --r-ctl: 6px;
    --r-box: 10px;

    /* Bootstrap 5.3 variables */
    --bs-primary: #0C3E4D;
    --bs-primary-rgb: 12, 62, 77;
    --bs-primary-text-emphasis: #082C37;
    --bs-primary-bg-subtle: #E3ECEE;
    --bs-primary-border-subtle: #B9CDD2;
    --bs-success: #2E7D4F;
    --bs-success-rgb: 46, 125, 79;
    --bs-danger: #B93A2B;
    --bs-danger-rgb: 185, 58, 43;
    --bs-link-color: #0C3E4D;
    --bs-link-color-rgb: 12, 62, 77;
    --bs-link-hover-color: #082C37;
    --bs-link-hover-color-rgb: 8, 44, 55;
    --bs-body-color: #142A31;
    --bs-body-color-rgb: 20, 42, 49;
    --bs-border-color: #DCE4E6;
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 10px;
    --bs-border-radius-xl: 10px;
    --bs-border-radius-xxl: 10px;
    --bs-focus-ring-color: rgba(240, 112, 50, .35);
}

/* ── type: the UI family everywhere except exam screens ── */
body:not([data-exam]) { font-family: var(--ui); }
body { background-color: var(--page); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── buttons: primary = petrol; the orange is reserved for .btn-action (one per screen) ── */
.btn-primary {
    --bs-btn-bg: #0C3E4D; --bs-btn-border-color: #0C3E4D;
    --bs-btn-hover-bg: #082C37; --bs-btn-hover-border-color: #082C37;
    --bs-btn-active-bg: #082C37; --bs-btn-active-border-color: #082C37;
    --bs-btn-disabled-bg: #0C3E4D; --bs-btn-disabled-border-color: #0C3E4D;
    --bs-btn-focus-shadow-rgb: 240, 112, 50;
}
.btn-outline-primary {
    --bs-btn-color: #0C3E4D; --bs-btn-border-color: #0C3E4D;
    --bs-btn-hover-bg: #0C3E4D; --bs-btn-hover-border-color: #0C3E4D;
    --bs-btn-active-bg: #082C37; --bs-btn-active-border-color: #082C37;
    --bs-btn-disabled-color: #0C3E4D; --bs-btn-disabled-border-color: #0C3E4D;
    --bs-btn-focus-shadow-rgb: 240, 112, 50;
}
.btn-action {
    --bs-btn-color: #fff; --bs-btn-bg: #F07032; --bs-btn-border-color: #F07032;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #C4521C; --bs-btn-hover-border-color: #C4521C;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #C4521C; --bs-btn-active-border-color: #C4521C;
    --bs-btn-focus-shadow-rgb: 240, 112, 50;
}
.btn-success {
    --bs-btn-bg: #2E7D4F; --bs-btn-border-color: #2E7D4F;
    --bs-btn-hover-bg: #24653F; --bs-btn-hover-border-color: #24653F;
    --bs-btn-active-bg: #24653F; --bs-btn-active-border-color: #24653F;
}
.btn-danger {
    --bs-btn-bg: #B93A2B; --bs-btn-border-color: #B93A2B;
    --bs-btn-hover-bg: #962E22; --bs-btn-hover-border-color: #962E22;
    --bs-btn-active-bg: #962E22; --bs-btn-active-border-color: #962E22;
}
/* app-custom.css gives every .btn a 12px radius and paints .btn-primary teal with a
   shadow + hover lift (properties, not variables) — undo that here. */
.btn { border-radius: var(--r-ctl); }
.btn-primary { background-color: var(--bs-btn-bg); border: 1px solid var(--bs-btn-border-color); box-shadow: none; }
.btn-primary:hover, .btn-primary:focus-visible { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); transform: none; box-shadow: none; }
.btn-primary:active { background-color: var(--bs-btn-active-bg); }
/* pill buttons are a template tell → control radius */
.btn.rounded-pill { border-radius: var(--r-ctl) !important; }
.rounded-4, .rounded-5 { border-radius: var(--r-box) !important; }

/* ── forms ── */
.form-control:focus, .form-select:focus {
    border-color: #2F5F6C;
    box-shadow: 0 0 0 .2rem rgba(240, 112, 50, .25);
}
.form-check-input:checked { background-color: #0C3E4D; border-color: #0C3E4D; }

/* ── cards: a hairline border, no grey shadow, no hover lift ── */
.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--r-box);
    --bs-card-inner-border-radius: calc(var(--r-box) - 1px);
}
/* app-custom.css: .card { border:none; radius 20px; shadow } + a blue hover glow */
.card { border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: none; }
.card:hover { box-shadow: none; }
.card.shadow-sm, .card.shadow, .card.shadow-lg { box-shadow: none !important; }
/* dashboard / list cards only — game and question cards keep their motion */
.mini-card:hover, .mc:hover, .kpi-card:hover, .metric-card:hover, .stat-card:hover,
.subject-card:hover, .wbt-card:hover, .pkg-card:hover, .qb-card:hover,
.resource-row:hover, .motivation-card:hover { transform: none !important; box-shadow: none !important; }

/* ── tables ── */
.table { --bs-table-border-color: var(--line-2); }
.table > thead th { color: var(--ink-2); font-weight: 600; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--petrol-50); }

/* ── age stages (students); exams keep their size ── */
body[data-stage="young"]:not([data-exam]) {
    font-size: 17px; line-height: 1.85;
    --r-ctl: 10px; --r-box: 16px;
    --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 16px; --bs-border-radius-xxl: 16px;
}
body[data-stage="young"]:not([data-exam]) .btn { padding-block: .5rem; }
body[data-stage="mid"]:not([data-exam]) {
    font-size: 16px; line-height: 1.75;
    --r-box: 12px; --bs-border-radius-lg: 12px; --bs-border-radius-xl: 12px;
}
/* older + staff keep the base size (15.5px from the layout) */