/*
 * TASS design tokens for the website's student pages.
 * Source of truth: TASSAPP src/theme/design-tokens.json (the Android/iOS release, TASSAPP PR #48).
 * Keep the values in step with that file. The old turquoise accent is retired: the accent is blue.
 * tests/WebsiteTASS.StudentBrand.Tests checks these values and that no turquoise comes back.
 */
:root {
    /* Colour (design-tokens.json color.light) */
    --tass-primary: #08086B;
    --tass-ink: #0F1240;
    --tass-deep-navy: #080839;
    --tass-accent: #8FB4FF;
    --tass-accent-text: #1F4FD1;
    --tass-accent-soft: #E3ECFF;
    --tass-muted: #5D647B;
    --tass-border: #DDE5EE;
    --tass-input-border: #858EA3;
    --tass-surface: #FFFFFF;
    --tass-surface-soft: #F5F9FC;
    --tass-lavender: #C0C7EA;
    --tass-white: #FFFFFF;
    --tass-danger: #B42318;
    --tass-danger-soft: #FDECEA;
    --tass-warning: #8A4B00;
    --tass-warning-soft: #FEF3C7;
    --tass-success: #146C43;
    --tass-success-soft: #E7F6EE;

    /* Brand overlay on photos (overlay.brand) */
    --tass-overlay-brand: linear-gradient(180deg, rgba(8, 8, 57, .53) 0%, rgba(8, 8, 107, .13) 45%, rgba(8, 8, 57, .93) 100%);

    /* Space, radius, size (space / radius / size) */
    --tass-space-xs: 8px;
    --tass-space-sm: 12px;
    --tass-space-md: 16px;
    --tass-space-lg: 24px;
    --tass-space-xl: 40px;
    --tass-radius-sm: 4px;
    --tass-radius-md: 8px;
    --tass-radius-lg: 16px;
    --tass-radius-pill: 999px;
    --tass-control: 48px;
    --tass-touch-target: 44px;
    --tass-sidebar: 232px;
    --tass-desktop: 1024px;

    /* Type: Montserrat (headings, wordmark), Inter (body), IBM Plex Sans Arabic (all Arabic text).
       Arabic glyphs fall through to IBM Plex Sans Arabic in every stack. */
    --tass-font-heading: "Montserrat", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tass-font-body: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tass-font-arabic: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Focus ring: white gap, primary band, accent band (3:1 on white and on navy) */
    --tass-focus-ring: 0 0 0 2px var(--tass-white), 0 0 0 4px var(--tass-primary), 0 0 0 6px var(--tass-accent);
    --tass-shadow-card: 0 1px 2px rgba(15, 18, 64, .06), 0 8px 24px rgba(15, 18, 64, .06);
}