/*
 * Design tokens for the shared components (resources/views/components).
 * Brand values come from the Figma variables already used in admin.css:
 * purple #4B0D9A, canvas #F9F6FF, divider #D7D7D7, Roboto.
 * Muted text is darker than the old #707070-on-tint and #CECECE values so
 * body text meets WCAG AA (4.5:1) on both white and the canvas tint.
 */
:root {
    /* Brand */
    --ds-purple: #4B0D9A;
    --ds-purple-hover: #3D0B7E;
    --ds-purple-tint: #F1EEFB;
    --ds-purple-tint-strong: #DDD0F2;

    /* Surfaces */
    --ds-canvas: #F9F6FF;
    --ds-surface: #FFFFFF;
    --ds-surface-muted: #F6F5FB;
    --ds-line: #D7D7D7;
    --ds-line-soft: #EDEDED;

    /* Text */
    --ds-text-strong: #111111;
    --ds-text: #4A4A4A;
    --ds-text-muted: #636363;
    --ds-placeholder: #8A8A8A;
    --ds-on-brand: #FFFFFF;

    /* Semantic (separate from the brand accent) */
    --ds-success: #1E7B34;
    --ds-success-tint: #EDF7EE;
    --ds-warning: #8A5300;
    --ds-warning-tint: #FFF4E0;
    --ds-danger: #C62828;
    --ds-danger-hover: #B71C1C;
    --ds-danger-tint: #FDF0F0;
    --ds-info: #0053B2;
    --ds-info-tint: #EBF3FF;

    /* Type scale */
    --ds-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ds-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --ds-text-xs: 12px;
    --ds-text-sm: 13px;
    --ds-text-md: 14px;
    --ds-text-lg: 16px;
    --ds-text-xl: 20px;
    --ds-text-2xl: 24px;
    --ds-weight-regular: 400;
    --ds-weight-medium: 500;
    --ds-leading: 1.5;

    /* Spacing scale */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 48px;

    /* Shape and controls */
    --ds-radius-sm: 4px;
    --ds-radius: 8px;
    --ds-radius-pill: 999px;
    --ds-control-height: 38px;
    --ds-control-height-sm: 30px;
    --ds-focus-ring: 0 0 0 3px rgba(75, 13, 154, 0.35);
    --ds-shadow-pop: 0 8px 24px rgba(17, 17, 17, 0.12);

    /* Layout */
    --ds-header-height: 64px;
    --ds-content-pad-x: 24px;
}

/* Visible keyboard focus for every interactive element, inputs included (C7). */
.shp_app :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-purple);
    outline-offset: 2px;
    box-shadow: none;
}

/* Inputs never fall back to the browser's own font (fixes monospace date fields, B10). */
.shp_app :is(input, select, textarea, button) { font-family: inherit; }

/* Utility shared by every component: numeric columns and figures (B4). */
.ds-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-nowrap { white-space: nowrap; }
.ds-muted { color: var(--ds-text-muted); }
.ds-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link (C7): hidden until focused. */
.ds-skip-link {
    position: absolute; left: var(--ds-space-4); top: -100px; z-index: 1000;
    background: var(--ds-purple); color: var(--ds-on-brand) !important;
    padding: var(--ds-space-2) var(--ds-space-4); border-radius: var(--ds-radius);
}
.ds-skip-link:focus { top: var(--ds-space-4); }

@media (prefers-reduced-motion: reduce) {
    .shp_app *, .shp_app *::before, .shp_app *::after { transition: none !important; animation: none !important; }
}