/* ==========================================================================
   AkademIQ Design System — Tokens (v0.17.0)
   Single source of truth for color, type, spacing, radius, shadow, motion and
   control-size decisions across the whole app. Every component/page rule
   should reference one of these custom properties rather than a literal
   value — see docs/ui/design-system.md for usage conventions.
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---- Color: brand ---------------------------------------------------- */
    --color-primary-50: #eef1fe;
    --color-primary-100: #e3e9ff;
    --color-primary-400: #5b6de0;
    --color-primary-500: #3b4fd6;
    --color-primary-600: #2f3fb5;
    --color-primary-700: #28349c;
    --color-primary: var(--color-primary-500);
    --color-primary-hover: var(--color-primary-600);
    --color-primary-active: var(--color-primary-700);
    --color-primary-subtle: var(--color-primary-50);
    --color-primary-subtle-strong: var(--color-primary-100);
    --color-on-primary: #ffffff;
    /* v0.28.0-rc2: text and links of the primary colour on a LIGHT surface. Equals the primary here; for an institution colour that is too pale to be read as text the branding supplies a darker shade of the same hue (the base colour itself is never changed). */
    --color-primary-text: var(--color-primary-500);

    /* Secondary accent - restrained teal, used sparingly for "premium
       academic-tech" highlight moments (hero gradients, WOW touches) so the
       whole app doesn't read as a single flat blue. */
    --color-accent-500: #0d9488;
    --color-accent-600: #0b7c72;
    --color-accent-subtle: #e3f6f3;
    --color-accent-text: var(--color-accent-600);
    --color-on-accent: #ffffff;

    /* ---- Color: neutrals / surfaces --------------------------------------- */
    --color-canvas: #f4f6fb;
    --color-surface: #ffffff;
    --color-surface-sunken: #eef1fb;
    --color-surface-inverse: #14213d;
    --color-surface-inverse-deep: #101a33;

    --color-text-primary: #14213d;
    --color-text-secondary: #4a5578;
    /* v0.33 Stage C (C3, AUDIT-A11Y-001): #6c7aa0 gave 4.26:1 on white, 3.94:1 on the canvas and 3.65:1 on the administrative banner - below
       WCAG 2.2 AA (4.5:1) wherever it was used for help text, filter labels and notes. #56648c: >= 4.83:1 on every background token
       (5.84:1 on white), still clearly lighter than --color-text-secondary. Pinned by ColorContrastTokenTests. */
    --color-text-muted: #56648c;
    /* Decorative / inactive only (borders, icons, disabled controls, placeholders) - never for text a person has to read (2.2:1). */
    --color-text-faint: #a3aecb;
    --color-text-on-primary: #ffffff;
    --color-text-on-inverse: #dbe1f4;
    --color-text-on-inverse-muted: #8b96b8;

    --color-border: #e4e8f3;
    --color-border-strong: #d3dbf0;
    --color-border-on-inverse: rgba(255, 255, 255, 0.08);

    /* v0.28.0-rc1 (INSTITUTION-BRANDING-001): the dark surface family can be re-coloured by the instance branding (secondary colour). Defaults = the standard AkademIQ look. */
    --color-on-inverse-strong: #ffffff;
    --color-inverse-hover: rgba(255, 255, 255, 0.08);
    --color-surface-inverse-darkest: #0b1428;
    --color-hero-start: var(--color-surface-inverse);
    --color-hero-end: var(--color-primary-700);

    /* ---- Color: semantic (each has bg / border / text / solid) ----------- */
    --color-success-bg: #e4f7ee;
    --color-success-border: #b7e4cd;
    --color-success-text: #17704d; /* v0.33 Stage C (C3): was #1f8a5f, 4.32:1 on white */
    --color-success-solid: #1f8a5f;

    --color-warning-bg: #fdf3e0;
    --color-warning-border: #f0b94d;
    --color-warning-text: #7a4e00;
    --color-warning-solid: #a3691a;

    --color-danger-bg: #fdecea;
    --color-danger-border: #f3c4bd;
    --color-danger-text: #7a2b21;
    --color-danger-solid: #c0392b;

    --color-info-bg: var(--color-primary-50);
    --color-info-border: var(--color-border-strong);
    --color-info-text: var(--color-primary-text);
    --color-info-solid: var(--color-primary-500);

    --color-neutral-bg: #f1f2f6;
    --color-neutral-text: #56648c; /* v0.33 Stage C (C3): = text-muted, was #6c7aa0 */

    /* ---- Typography -------------------------------------------------------
       One font stack (no new dependency); a bounded weight set (400/600/700)
       used consistently instead of ad-hoc per-page weights. */
    --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

    --text-display-size: 2rem;
    --text-display-weight: 700;
    --text-display-line: 1.2;

    --text-page-title-size: 1.5rem;
    --text-page-title-weight: 700;
    --text-page-title-line: 1.25;

    --text-section-title-size: 1.05rem;
    --text-section-title-weight: 700;
    --text-section-title-line: 1.3;

    --text-body-size: 0.95rem;
    --text-body-weight: 400;
    --text-body-line: 1.55;

    --text-compact-size: 0.87rem;
    --text-compact-line: 1.4;

    --text-caption-size: 0.75rem;
    --text-caption-weight: 700;
    --text-caption-tracking: 0.05em;

    --text-label-size: 0.85rem;
    --text-label-weight: 600;

    /* ---- Spacing scale ----------------------------------------------------- */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* ---- Radius scale ------------------------------------------------------ */
    --radius-sm: 0.4rem;
    --radius-md: 0.6rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 999px;

    /* ---- Shadow / elevation scale ------------------------------------------
       Kept subtle throughout (B2: "oszczędnie") - used for card hover lift,
       dropdown/menu panels, the login card and the mobile drawer only. */
    --shadow-xs: 0 1px 2px rgba(20, 33, 61, 0.06);
    --shadow-sm: 0 2px 8px rgba(20, 33, 61, 0.08);
    --shadow-md: 0 8px 24px rgba(20, 33, 61, 0.12);
    --shadow-lg: 0 20px 48px rgba(20, 33, 61, 0.18);
    --shadow-hero: 0 24px 64px rgba(20, 33, 61, 0.35);

    /* ---- Borders ------------------------------------------------------------ */
    --border-width: 1px;

    /* ---- Icon sizes ----------------------------------------------------------- */
    --icon-sm: 1rem;
    --icon-md: 1.15rem;
    --icon-lg: 1.5rem;

    /* ---- Control heights (buttons/inputs/selects) - >=44px on touch, see
       components.css media query for the mobile bump. ----------------------- */
    --control-h-sm: 2rem;
    --control-h-md: 2.5rem;
    --control-h-lg: 2.9rem;
    --control-touch-min: 2.75rem;

    /* ---- Focus ------------------------------------------------------------- */
    --focus-ring-color: var(--color-primary);
    --focus-ring-color-on-inverse: #8ab4ff;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* ---- Motion -------------------------------------------------------------
       150-250ms range per spec; prefers-reduced-motion is respected globally
       in base.css, not per-rule. */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 240ms;
    --motion-ease: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Z-index scale -------------------------------------------------------- */
    --z-dropdown: 20;
    --z-sticky: 40;
    --z-drawer-scrim: 60;
    --z-drawer-toggle: 61;
    --z-error-banner: 1000;

    /* ---- v0.28.0-rc1 brand aliases ------------------------------------------
       The names new code should use for "the institution's colours". They simply point at the design-system tokens above, which the instance
       branding overrides (generated, validated values only - never free CSS; see ADR 0031). With no branding configured they equal the standard theme. */
    --brand-primary: var(--color-primary);
    --brand-primary-hover: var(--color-primary-hover);
    --brand-primary-contrast: var(--color-on-primary);
    --brand-secondary: var(--color-surface-inverse);
    --brand-secondary-contrast: var(--color-text-on-inverse);
    --brand-accent: var(--color-accent-500);
    --brand-accent-contrast: var(--color-on-accent);
    --brand-header-bg: var(--color-surface-inverse);
    --brand-header-text: var(--color-on-inverse-strong);
    --brand-link: var(--color-primary-text);
    --brand-focus: var(--focus-ring-color);
}