/* Rukukwe Dashboard design tokens.
   Copied verbatim from the "Rukukwe Dashboard Design System" project (c852acfb) so the portal and
   the design stay in step: colours, type, spacing, radii, elevation and motion. Light is the
   default; dark swaps the same roles via [data-theme="dark"] on <html>.
   Change a value here only by changing it in the design system first. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---- colours ------------------------------------------------------------------------------- */
:root {
    /* Base palette */
    --violet-50: #F4F1FE; --violet-100: #EDE8FD; --violet-200: #DAD1FB; --violet-300: #C4B5FD;
    --violet-400: #9E86F2; --violet-500: #7050DE; --violet-600: #5F40CC; --violet-700: #5732C8; --violet-800: #3F2596;
    --grey-0: #FFFFFF; --grey-25: #F9FAFB; --grey-50: #F6F7F9; --grey-100: #F1F2F5; --grey-150: #ECEEF2;
    --grey-200: #E6E8EC; --grey-300: #D5D8DE; --grey-400: #A2A7B4; --grey-500: #6B7180; --grey-600: #4A5060;
    --grey-800: #262A33; --grey-900: #16181D;
    --green-50: #E8F6EE; --green-500: #15803D; --green-700: #157A40;
    --red-50: #FDECEC; --red-500: #C9241F; --red-700: #B42318;
    --amber-50: #FEF3E2; --amber-400: #F4A259; --amber-700: #9A4A0B;
    --blue-50: #E9F1FD; --blue-700: #1D5CB8;
    --teal-400: #3BB2A0;

    /* Surfaces */
    --surface-page: #E9EBF0;
    --surface-app: var(--grey-50);
    --surface-card: var(--grey-0);
    --surface-sunken: var(--grey-100);
    --surface-hover: var(--grey-150);
    --surface-inverse: var(--grey-900);

    /* Borders */
    --border: var(--grey-200);
    --border-strong: var(--grey-300);

    /* Ink */
    --ink: var(--grey-900);
    --ink-secondary: var(--grey-600);
    --ink-muted: var(--grey-500);
    --ink-disabled: var(--grey-400);
    --ink-on-primary: #FFFFFF;
    --ink-inverse: #FFFFFF;

    /* Primary: the one loud colour. If two things on screen are violet, one is wrong. */
    --primary: var(--violet-500);
    --primary-hover: var(--violet-600);
    --primary-press: var(--violet-700);
    --primary-soft: var(--violet-100);
    --primary-soft-ink: var(--violet-700);

    /* Status soft pairs: always *-soft ground with *-ink text, never a solid fill. */
    --success: var(--green-500); --success-soft: var(--green-50); --success-ink: var(--green-700);
    --danger: var(--red-500); --danger-hover: var(--red-700); --danger-soft: var(--red-50); --danger-ink: var(--red-700);
    --warning: var(--amber-400); --warning-soft: var(--amber-50); --warning-ink: var(--amber-700);
    --info-soft: var(--blue-50); --info-ink: var(--blue-700);
    --neutral-soft: var(--grey-100); --neutral-ink: var(--grey-600);

    /* Charts: use in order */
    --chart-1: var(--violet-500);
    --chart-2: var(--violet-200);
    --chart-3: var(--amber-400);
    --chart-4: var(--teal-400);
    --chart-grid: var(--border);
}

[data-theme="dark"] {
    --surface-page: #0E0F13;
    --surface-app: #15171C;
    --surface-card: #1C1F26;
    --surface-sunken: #23262E;
    --surface-hover: #272A33;
    --surface-inverse: #ECEDF1;
    --border: #2C3039;
    --border-strong: #3A3F4A;
    --ink: #ECEDF1;
    --ink-secondary: #A2A7B4;
    --ink-muted: #8C92A0;
    --ink-disabled: #5A606C;
    --ink-inverse: #16181D;
    --primary: #7050DE;
    --primary-hover: #7C5CF0;
    --primary-press: #5F40CC;
    --primary-soft: #2A2342;
    --primary-soft-ink: #C4B5FD;
    --success: #4ADE80; --success-soft: #12301F; --success-ink: #6EE7A0;
    --danger: #F87171; --danger-hover: #FCA5A5; --danger-soft: #3A1818; --danger-ink: #FCA5A5;
    --warning: #F4A259; --warning-soft: #35240F; --warning-ink: #F8C48E;
    --info-soft: #132A47; --info-ink: #93C0F8;
    --neutral-soft: #272A33; --neutral-ink: #A2A7B4;
    --chart-1: #8B6CF6;
    --chart-2: #3A3160;
    --chart-3: #F4A259;
    --chart-4: #3BB2A0;
}

/* ---- typography ---------------------------------------------------------------------------- */
:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

    --page-title-size: 24px; --page-title-lh: 32px; --page-title-weight: 600; --page-title-tracking: -0.01em;
    --stat-value-size: 28px; --stat-value-lh: 36px; --stat-value-weight: 600; --stat-value-tracking: -0.02em;
    --section-title-size: 16px; --section-title-lh: 24px; --section-title-weight: 600;
    --body-size: 14px; --body-lh: 20px;
    --small-size: 13px; --small-lh: 18px;
    --caption-size: 12px; --caption-lh: 16px;
    --overline-size: 11px; --overline-lh: 16px; --overline-tracking: 0.06em;

    --text-page-title: var(--page-title-weight) var(--page-title-size)/var(--page-title-lh) var(--font-sans);
    --text-stat-value: var(--stat-value-weight) var(--stat-value-size)/var(--stat-value-lh) var(--font-sans);
    --text-section-title: var(--section-title-weight) var(--section-title-size)/var(--section-title-lh) var(--font-sans);
    --text-body: 400 var(--body-size)/var(--body-lh) var(--font-sans);
    --text-body-medium: 500 var(--body-size)/var(--body-lh) var(--font-sans);
    --text-small: 400 var(--small-size)/var(--small-lh) var(--font-sans);
    --text-caption: 400 var(--caption-size)/var(--caption-lh) var(--font-sans);
    --text-caption-medium: 500 var(--caption-size)/var(--caption-lh) var(--font-sans);
    --text-overline: 600 var(--overline-size)/var(--overline-lh) var(--font-sans);
}

/* ---- spacing and layout -------------------------------------------------------------------- */
:root {
    --space-0: 0; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px;
    --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px;

    --sidebar-width: 256px;
    --nav-item-height: 40px;
    --table-row-height: 52px;
    --control-height-sm: 32px; --control-height-md: 40px; --control-height-lg: 44px;
    --icon-nav: 18px; --icon-button: 16px; --icon-well: 36px;
    --main-padding: var(--space-8);
    --grid-gap: var(--space-6);
    --card-padding: var(--space-6);
}

/* ---- radius -------------------------------------------------------------------------------- */
:root {
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
}

/* ---- elevation: borders before shadows ----------------------------------------------------- */
:root {
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(22, 24, 29, 0.04);
    --shadow-sm: 0 1px 3px rgba(22, 24, 29, 0.06), 0 1px 2px rgba(22, 24, 29, 0.04);
    --shadow-md: 0 8px 24px -4px rgba(22, 24, 29, 0.10), 0 2px 6px rgba(22, 24, 29, 0.05);
    --shadow-lg: 0 20px 48px -8px rgba(22, 24, 29, 0.18), 0 4px 12px rgba(22, 24, 29, 0.06);
    --shadow-focus: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--primary);
    --overlay-scrim: rgba(22, 24, 29, 0.40);
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, 0.60);
    --overlay-scrim: rgba(0, 0, 0, 0.60);
}

/* ---- motion: minimal, no bounces, no entrance animations ------------------------------------ */
:root {
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 240ms;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}