/*!
 * Radoslav.online Design System
 * ============================================================================
 *
 * CANONICAL SOURCE. Platform owns this file (Architecture R1 section 18:
 * DESIGN_SYSTEM_OWNER = PLATFORM_SHELL_CANONICAL_SOURCE).
 *
 *   design-system-version: see assets/design-system/VERSION
 *   source-repo:           Digital-Union-Company/Radoslav.online-Platform
 *   source-path:           assets/design-system/radoslav-design-system.css
 *
 * ----------------------------------------------------------------------------
 * WHAT THIS FILE IS
 * ----------------------------------------------------------------------------
 *
 * One flattened, hand-authored, self-contained stylesheet. No build step, no
 * preprocessor, no package manager, no @import, no webfont, no remote request
 * of any kind. What you read here is exactly what is served.
 *
 * It is deployed through the Platform's release-scoped asset namespace at
 * `/platform-assets/r-<release-sha40>/design-system/radoslav-design-system.css`,
 * so every release serves its own immutable copy and no cache-busting
 * query string is needed.
 *
 * ----------------------------------------------------------------------------
 * HOW OTHER PROJECTS ADOPT IT  (the pinned-copy contract)
 * ----------------------------------------------------------------------------
 *
 * A project does NOT link to this file across origins. It copies these exact
 * bytes into its own repository, serves them from its own origin, and records
 * the provenance in a PINNED.json beside the copy. A Platform deploy therefore
 * cannot restyle or break an adopter, and an adopter can revert on its own.
 *
 *   RUNTIME_FETCH_FROM_PLATFORM       = NO
 *   CSS_LINK_TO_PLATFORM_ORIGIN       = NO
 *   CROSS_PROJECT_THEME_SYNC_REQUIRED = NO
 *
 * Every class is prefixed `rds-` and every custom property `--rds-` so a copy
 * can be dropped into an application that already owns `.card`, `.shell` or
 * `--bg` without colliding with it.
 *
 * ----------------------------------------------------------------------------
 * SCOPE
 * ----------------------------------------------------------------------------
 *
 * Seven primitive families, deliberately small:
 *
 *   1. COLOUR TOKENS   2. TYPOGRAPHY   3. SPACING   4. PAGE SHELL
 *   5. CARD            6. BUTTON       7. FORM FIELD
 *
 * Toggle, badge, modal, helper text, settings section, empty state,
 * reorderable list/grid and status feedback are NOT in this revision. Where a
 * surface needs such an affordance today it composes one from the families
 * above rather than inventing a primitive here early.
 *
 * ----------------------------------------------------------------------------
 * THEME
 * ----------------------------------------------------------------------------
 *
 * System, Light or Dark, exactly as Architecture R1 section 18 and the Slice 8
 * Central Admin implementation established:
 *
 *   :root                                   light palette (the declared default)
 *   :root[data-theme="light"]               light, forced
 *   @media (prefers-color-scheme: dark)
 *     :root:not([data-theme])                dark, chosen by the OS
 *   :root[data-theme="dark"]                dark, forced
 *
 * Under System the `data-theme` attribute is ABSENT, which is what the
 * OS-driven branch keys on. There is no third `data-theme="system"` state.
 *
 * An application that never sets `data-theme` gets correct System behaviour
 * from this file alone, with no database, session or settings dependency. That
 * is what lets an adopter use this stylesheet without reaching into Platform.
 *
 * Every colour literal is declared exactly ONCE, in the palette block below.
 * The light/dark branches only re-point semantic tokens at palette entries, so
 * a colour can never drift between the forced and OS-driven paths.
 */

/* ===========================================================================
 * 1. COLOUR TOKENS
 * ======================================================================== */

:root {
    color-scheme: light dark;

    /* Raw palette. Each literal appears exactly once in this file. */
    --rds-palette-white: #ffffff;
    --rds-palette-grey-50: #f7f7f8;
    --rds-palette-grey-100: #eeeff1;
    --rds-palette-grey-200: #e3e4e8;
    --rds-palette-grey-400: #9a9ea6;
    --rds-palette-grey-500: #5f6368;
    --rds-palette-grey-700: #32343a;
    --rds-palette-grey-800: #232428;
    --rds-palette-grey-900: #1b1c1f;
    --rds-palette-ink: #17181b;
    --rds-palette-scrim: rgb(0 0 0 / 0.4);

    --rds-palette-accent: #2f6fdd;
    --rds-palette-accent-strong: #2459bb;
    --rds-palette-accent-light: #6b9ef5;

    --rds-palette-danger: #b3362c;
    --rds-palette-danger-light: #f0a39b;
    --rds-palette-danger-surface: #fdf1ef;
    --rds-palette-danger-surface-dark: #2f1d1a;

    --rds-palette-notice-surface: #fdf6e8;
    --rds-palette-notice-border: #e9d9b4;
    --rds-palette-notice-ink: #7a5a17;
    --rds-palette-notice-surface-dark: #2e2718;
    --rds-palette-notice-border-dark: #55492a;
    --rds-palette-notice-ink-dark: #e2c88e;

    /* Semantic tokens. These are what components may use. */
    --rds-bg: var(--rds-palette-grey-50);
    --rds-panel: var(--rds-palette-white);
    --rds-panel-raised: var(--rds-palette-grey-100);
    --rds-fg: var(--rds-palette-ink);
    --rds-fg-muted: var(--rds-palette-grey-500);
    --rds-fg-faint: var(--rds-palette-grey-400);
    --rds-border: var(--rds-palette-grey-200);
    --rds-border-strong: var(--rds-palette-grey-400);

    --rds-accent: var(--rds-palette-accent);
    --rds-accent-hover: var(--rds-palette-accent-strong);
    --rds-on-accent: var(--rds-palette-white);

    --rds-danger: var(--rds-palette-danger);
    --rds-danger-surface: var(--rds-palette-danger-surface);

    --rds-notice-surface: var(--rds-palette-notice-surface);
    --rds-notice-border: var(--rds-palette-notice-border);
    --rds-notice-fg: var(--rds-palette-notice-ink);

    --rds-focus-ring: var(--rds-palette-accent);

    --rds-radius: 0.5rem;
    --rds-radius-sm: 0.3rem;
}

:root[data-theme="light"] {
    color-scheme: light;
}

/* Only when nothing is forced does the operating system decide. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --rds-bg: var(--rds-palette-grey-900);
        --rds-panel: var(--rds-palette-grey-800);
        --rds-panel-raised: var(--rds-palette-grey-700);
        --rds-fg: var(--rds-palette-grey-100);
        --rds-fg-muted: var(--rds-palette-grey-400);
        --rds-fg-faint: var(--rds-palette-grey-500);
        --rds-border: var(--rds-palette-grey-700);
        --rds-border-strong: var(--rds-palette-grey-500);

        --rds-accent: var(--rds-palette-accent-light);
        --rds-accent-hover: var(--rds-palette-accent);
        /* Dark re-points the accent at a LIGHT blue, which is what makes link
           text readable on a dark page. A light fill cannot also carry white
           text, so the accent FOREGROUND flips to ink here. The accent token
           itself is deliberately not darkened: that would fix the button by
           spoiling the link colour this branch exists to provide. */
        --rds-on-accent: var(--rds-palette-ink);

        --rds-danger: var(--rds-palette-danger-light);
        --rds-danger-surface: var(--rds-palette-danger-surface-dark);

        --rds-notice-surface: var(--rds-palette-notice-surface-dark);
        --rds-notice-border: var(--rds-palette-notice-border-dark);
        --rds-notice-fg: var(--rds-palette-notice-ink-dark);

        --rds-focus-ring: var(--rds-palette-accent-light);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --rds-bg: var(--rds-palette-grey-900);
    --rds-panel: var(--rds-palette-grey-800);
    --rds-panel-raised: var(--rds-palette-grey-700);
    --rds-fg: var(--rds-palette-grey-100);
    --rds-fg-muted: var(--rds-palette-grey-400);
    --rds-fg-faint: var(--rds-palette-grey-500);
    --rds-border: var(--rds-palette-grey-700);
    --rds-border-strong: var(--rds-palette-grey-500);

    --rds-accent: var(--rds-palette-accent-light);
    --rds-accent-hover: var(--rds-palette-accent);
    /* Same flip as the OS-driven branch above, for the same reason. The two
       dark paths must agree token for token or a forced theme and an OS theme
       would disagree about the same button. */
    --rds-on-accent: var(--rds-palette-ink);

    --rds-danger: var(--rds-palette-danger-light);
    --rds-danger-surface: var(--rds-palette-danger-surface-dark);

    --rds-notice-surface: var(--rds-palette-notice-surface-dark);
    --rds-notice-border: var(--rds-palette-notice-border-dark);
    --rds-notice-fg: var(--rds-palette-notice-ink-dark);

    --rds-focus-ring: var(--rds-palette-accent-light);
}

/* ===========================================================================
 * 2. TYPOGRAPHY
 * ======================================================================== */

:root {
    --rds-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rds-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --rds-text-sm: 0.85rem;
    --rds-text-base: 1rem;
    --rds-text-lg: 1.25rem;
    --rds-text-xl: 1.6rem;
    --rds-text-2xl: 2rem;

    --rds-leading: 1.5;
}

.rds-root {
    font-family: var(--rds-font-sans);
    font-size: var(--rds-text-base);
    line-height: var(--rds-leading);
    color: var(--rds-fg);
    background: var(--rds-bg);
    -webkit-text-size-adjust: 100%;
}

.rds-root *,
.rds-root *::before,
.rds-root *::after {
    box-sizing: border-box;
}

.rds-root h1,
.rds-root h2,
.rds-root h3 {
    margin: 0 0 var(--rds-space-3);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.rds-root h1 { font-size: var(--rds-text-xl); }
.rds-root h2 { font-size: var(--rds-text-lg); }
.rds-root h3 { font-size: var(--rds-text-base); }

.rds-root p { margin: 0 0 var(--rds-space-3); }

.rds-root a {
    color: var(--rds-accent);
    text-decoration: none;
}

.rds-root a:hover { text-decoration: underline; }

.rds-root code,
.rds-root kbd,
.rds-root samp { font-family: var(--rds-font-mono); font-size: var(--rds-text-sm); }

/* Secondary text. The one typographic modifier the seven families need. */
.rds-muted { color: var(--rds-fg-muted); }
.rds-small { font-size: var(--rds-text-sm); }

.rds-title {
    font-size: var(--rds-text-2xl);
    margin: 0 0 var(--rds-space-2);
}

/* Definition lists carry Platform's diagnostics and facts tables. Element-level
   because they are structure, not a component. */
.rds-root dl { margin: 0; }
.rds-root dt { font-weight: 600; }
.rds-root dd { margin: 0 0 var(--rds-space-3); color: var(--rds-fg-muted); }

.rds-root table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rds-text-sm);
}

.rds-root th,
.rds-root td {
    text-align: left;
    padding: var(--rds-space-2) var(--rds-space-3);
    border-bottom: 1px solid var(--rds-border);
    vertical-align: middle;
}

.rds-root th { font-weight: 600; color: var(--rds-fg-muted); }

/* ===========================================================================
 * 3. SPACING
 * ======================================================================== */

:root {
    --rds-space-1: 0.25rem;
    --rds-space-2: 0.5rem;
    --rds-space-3: 0.75rem;
    --rds-space-4: 1rem;
    --rds-space-5: 1.5rem;
    --rds-space-6: 2rem;
    --rds-space-7: 3rem;

    --rds-measure: 60rem;
    --rds-measure-narrow: 28rem;
}

.rds-stack > * + * { margin-top: var(--rds-space-4); }
.rds-stack-tight > * + * { margin-top: var(--rds-space-2); }

/* ===========================================================================
 * 4. PAGE SHELL
 * ======================================================================== */

/* The page background is declared on BOTH the root and the body, deliberately.
   The root paints the canvas, which is what makes over-scroll and short pages
   look right. The body declaration is the page-shell contract proper: it is
   what `getComputedStyle(document.body).backgroundColor` reports, and it is
   what Slice 8 established before the design system existed. Setting it only on
   the root leaves body transparent, which looks identical and reads as a
   missing background to anything that inspects the document. */
.rds-root body,
body.rds-root {
    margin: 0;
    min-height: 100vh;
    background: var(--rds-bg);
}

.rds-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rds-space-4);
    padding: var(--rds-space-3) var(--rds-space-5);
    background: var(--rds-panel);
    border-bottom: 1px solid var(--rds-border);
}

.rds-shell-brand {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.rds-shell-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rds-space-4);
}

/* Pushes everything after it to the far edge of the shell. */
.rds-shell-spacer { margin-left: auto; }

.rds-shell-meta {
    color: var(--rds-fg-muted);
    font-size: var(--rds-text-sm);
}

.rds-main {
    max-width: var(--rds-measure);
    margin: 0 auto;
    padding: var(--rds-space-6) var(--rds-space-5);
}

/* A single centred column: the anonymous landing and the sign-in surface. */
.rds-centred {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: var(--rds-space-6);
}

.rds-centred-inner {
    width: 100%;
    max-width: var(--rds-measure-narrow);
    text-align: center;
}

.rds-section + .rds-section { margin-top: var(--rds-space-7); }

@media (max-width: 40rem) {
    .rds-main { padding: var(--rds-space-5) var(--rds-space-4); }
    .rds-shell { padding: var(--rds-space-3) var(--rds-space-4); }
}

/* ===========================================================================
 * 5. CARD
 * ======================================================================== */

.rds-card {
    background: var(--rds-panel);
    border: 1px solid var(--rds-border);
    border-radius: var(--rds-radius);
    padding: var(--rds-space-5);
}

.rds-card > :last-child { margin-bottom: 0; }

.rds-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--rds-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rds-card-title {
    display: block;
    font-weight: 600;
    font-size: var(--rds-text-base);
    margin-bottom: var(--rds-space-1);
}

.rds-card-icon {
    display: block;
    font-size: var(--rds-text-lg);
    margin-bottom: var(--rds-space-2);
}

.rds-card-muted {
    opacity: 0.6;
}

/* Card variants used for inline messages. Composing a notice from the card
   primitive is deliberate: it avoids introducing a status-feedback primitive
   before the visual contract is settled. */
.rds-card-notice {
    background: var(--rds-notice-surface);
    border-color: var(--rds-notice-border);
    color: var(--rds-notice-fg);
}

.rds-card-danger {
    background: var(--rds-danger-surface);
    border-color: var(--rds-danger);
    color: var(--rds-danger);
}

.rds-card-quiet {
    background: transparent;
    border-style: dashed;
    text-align: center;
    color: var(--rds-fg-muted);
}

/* A native <dialog> is a card the browser positions. Without this it keeps the
   user agent's white background, which is wrong in dark mode; this is the
   minimum needed for the card family to be coherent, and it is deliberately
   NOT a modal primitive — no backdrop choreography, no sizing system, no
   open/close behaviour. */
.rds-root dialog {
    background: var(--rds-panel);
    color: var(--rds-fg);
    border: 1px solid var(--rds-border);
    border-radius: var(--rds-radius);
    padding: var(--rds-space-5);
    max-width: var(--rds-measure-narrow);
}

.rds-root dialog::backdrop { background: var(--rds-palette-scrim); }

/* ===========================================================================
 * 6. BUTTON
 * ======================================================================== */

.rds-button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    padding: var(--rds-space-2) var(--rds-space-4);
    border: 1px solid var(--rds-border-strong);
    border-radius: var(--rds-radius-sm);
    background: var(--rds-panel);
    color: var(--rds-fg);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.rds-button:hover {
    background: var(--rds-panel-raised);
    text-decoration: none;
}

.rds-button:focus-visible,
.rds-field-input:focus-visible,
.rds-root a:focus-visible {
    outline: 2px solid var(--rds-focus-ring);
    outline-offset: 2px;
}

.rds-button-primary {
    background: var(--rds-accent);
    border-color: var(--rds-accent);
    color: var(--rds-on-accent);
}

.rds-button-primary:hover {
    background: var(--rds-accent-hover);
    border-color: var(--rds-accent-hover);
}

.rds-button-danger {
    color: var(--rds-danger);
    border-color: var(--rds-danger);
}

.rds-button-quiet {
    background: transparent;
    border-color: transparent;
    font-weight: 400;
    color: var(--rds-fg-muted);
    padding-left: var(--rds-space-2);
    padding-right: var(--rds-space-2);
}

.rds-button-quiet:hover {
    background: var(--rds-panel-raised);
    color: var(--rds-fg);
}

.rds-button[disabled],
.rds-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

.rds-button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rds-space-2);
}

/* ===========================================================================
 * 7. FORM FIELD
 * ======================================================================== */

.rds-form { margin: 0; }

.rds-field {
    display: block;
    margin-bottom: var(--rds-space-4);
}

.rds-field-label {
    display: block;
    font-weight: 600;
    font-size: var(--rds-text-sm);
    margin-bottom: var(--rds-space-1);
}

.rds-field-input {
    display: block;
    width: 100%;
    font: inherit;
    color: var(--rds-fg);
    background: var(--rds-panel);
    border: 1px solid var(--rds-border-strong);
    border-radius: var(--rds-radius-sm);
    padding: var(--rds-space-2) var(--rds-space-3);
}

.rds-field-input::placeholder { color: var(--rds-fg-faint); }

/* Checkboxes and radios are intrinsically sized; the full-width rule above is
   for text-like controls only. */
.rds-field-choice {
    display: flex;
    align-items: center;
    gap: var(--rds-space-2);
    margin-bottom: var(--rds-space-2);
    font-size: var(--rds-text-base);
}

.rds-field-choice input {
    width: auto;
    margin: 0;
    accent-color: var(--rds-accent);
}

.rds-field-hint {
    display: block;
    margin-top: var(--rds-space-1);
    font-size: var(--rds-text-sm);
    color: var(--rds-fg-muted);
}

.rds-field-error {
    display: block;
    margin-top: var(--rds-space-1);
    font-size: var(--rds-text-sm);
    color: var(--rds-danger);
}

.rds-field-input[aria-invalid="true"] { border-color: var(--rds-danger); }

.rds-fieldset {
    border: 0;
    margin: 0 0 var(--rds-space-4);
    padding: 0;
    min-width: 0;
}

.rds-fieldset > legend {
    padding: 0;
    font-weight: 600;
    font-size: var(--rds-text-sm);
    margin-bottom: var(--rds-space-2);
}

.rds-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rds-space-3);
}

.rds-field-row .rds-field { margin-bottom: 0; }