/* ─────────────────────────────────────────────────────────────
   Design tokens — the single source of truth for the panel's
   colour, shape and elevation. Shared with tt-web.

   Every portal (school, teacher, parent, super admin) links this
   first; nothing below it should hard-code a brand colour.
   ───────────────────────────────────────────────────────────── */

:root {
    /* Brand */
    --primary: #3579F1;
    --primary-solid: #3579F1;
    --primary-light: #3B82F6;
    --primary-ink: #3579F1;
    --primary-soft: #D9E6FB;
    --primary-soft-strong: #C5D9F8;
    --primary-rgb: 53, 121, 241;

    /* Surfaces */
    --bg-main: #F5F7FA;
    --bg-card: #ffffff;
    --bg-subtle: #F8FAFD;
    --sidebar-bg: #F3F6FD;
    --sidebar-hover: #EAF1FC;
    --field-bg: #F1F4F9;
    --field-border: #E3E9F2;

    /* Ink */
    --text-primary: #101B33;
    --text-secondary: #667490;
    --text-muted: #98A2B3;
    --nav-ink: #3E4A63;

    /* Lines */
    --border-color: #EBEFF5;
    --border-strong: #DCE3EC;

    /* Status */
    --success: #12B76A;
    --success-soft: #E6F8EF;
    --warning: #F59E0B;
    --warning-soft: #FEF3E0;
    --danger: #F04438;
    --danger-soft: #FDECEA;
    --info: #2E90FA;
    --info-soft: #E7F1FE;
    --purple: #7A5AF8;
    --purple-soft: #F0ECFF;
    --rose: #F43F5E;
    --rose-soft: #FDEBEF;
    --teal: #0FB5AE;
    --teal-soft: #E3F7F6;

    /* Shape */
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 10px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.05);
    --shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.10);

    --sidebar-width: 266px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--primary-soft-strong);
    color: var(--primary-ink);
}