/* ReviewGrow AI design-system foundation.
 *
 * This file owns shared tokens and opt-in primitives. Existing page styles
 * continue to consume the --rs-* compatibility aliases during incremental
 * migration. Keep page-specific selectors out of this layer.
 */

:root {
    color-scheme: light;

    /* Brand and action colours */
    --rg-color-primary: #1d4ed8;
    --rg-color-primary-hover: #1e40af;
    --rg-color-primary-soft: #eff6ff;
    --rg-color-secondary: #0f766e;
    --rg-color-secondary-hover: #115e59;
    --rg-color-secondary-soft: #f0fdfa;

    /* Canvas, surfaces and text */
    --rg-color-canvas: #f6f8fb;
    --rg-color-surface: #ffffff;
    --rg-color-surface-muted: #f8fafc;
    --rg-color-surface-raised: #ffffff;
    --rg-color-text: #0f172a;
    --rg-color-text-muted: #475569;
    --rg-color-text-subtle: #64748b;
    --rg-color-border: #e2e8f0;
    --rg-color-border-strong: #cbd5e1;
    --rg-color-focus: #2563eb;
    --rg-focus-ring: 0 0 0 3px rgba(37, 99, 235, .28);

    /* Semantic feedback */
    --rg-color-success: #047857;
    --rg-color-success-soft: #ecfdf5;
    --rg-color-warning: #92400e;
    --rg-color-warning-soft: #fffbeb;
    --rg-color-error: #b91c1c;
    --rg-color-error-soft: #fef2f2;
    --rg-color-info: #1d4ed8;
    --rg-color-info-soft: #eff6ff;
    --rg-color-rating-star: #a16207;
    --rg-color-draft: #9a3412;
    --rg-color-draft-border: #fdba74;
    --rg-color-draft-soft: #fff7ed;

    /* Semantic primary actions intentionally remain neutral, not status-coloured. */
    --rg-action-primary-background: #111827;
    --rg-action-primary-foreground: #ffffff;
    --rg-action-primary-border: #111827;
    --rg-action-primary-hover: #020617;
    --rg-action-primary-active: #000000;
    --rg-action-primary-disabled: #64748b;

    /* Durable operational states */
    --rg-status-queued: #475569;
    --rg-status-queued-soft: #f1f5f9;
    --rg-status-processing: #1d4ed8;
    --rg-status-processing-soft: #eff6ff;
    --rg-status-retrying: #9a3412;
    --rg-status-retrying-soft: #fff7ed;
    --rg-status-completed: #047857;
    --rg-status-completed-soft: #ecfdf5;
    --rg-status-action-required: #b91c1c;
    --rg-status-action-required-soft: #fef2f2;
    --rg-status-draft-ready: var(--rg-color-draft);
    --rg-status-draft-ready-soft: var(--rg-color-draft-soft);
    --rg-status-cancelled: #475569;
    --rg-status-cancelled-soft: #f1f5f9;
    --rg-status-skipped: #5b21b6;
    --rg-status-skipped-soft: #f5f3ff;

    /* Typography */
    --rg-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rg-font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rg-font-size-xs: .75rem;
    --rg-font-size-sm: .875rem;
    --rg-font-size-md: 1rem;
    --rg-font-size-lg: 1.125rem;
    --rg-font-size-xl: 1.25rem;
    --rg-font-size-2xl: 1.5rem;
    --rg-font-size-3xl: clamp(1.75rem, 3vw, 2.25rem);
    --rg-line-height-tight: 1.2;
    --rg-line-height-body: 1.6;
    --rg-line-height-relaxed: 1.75;

    /* Spacing */
    --rg-space-0: 0;
    --rg-space-1: .25rem;
    --rg-space-2: .5rem;
    --rg-space-3: .75rem;
    --rg-space-4: 1rem;
    --rg-space-5: 1.25rem;
    --rg-space-6: 1.5rem;
    --rg-space-8: 2rem;
    --rg-space-10: 2.5rem;
    --rg-space-12: 3rem;
    --rg-space-16: 4rem;

    /* Shape and depth */
    --rg-radius-sm: .625rem;
    --rg-radius-md: .875rem;
    --rg-radius-lg: 1.125rem;
    --rg-radius-xl: 1.5rem;
    --rg-radius-pill: 999px;
    --rg-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --rg-shadow-md: 0 12px 30px rgba(15, 23, 42, .08);
    --rg-shadow-lg: 0 24px 64px rgba(15, 23, 42, .12);

    /* Controls and layout */
    --rg-control-height-sm: 2.5rem;
    --rg-control-height-md: 2.75rem;
    --rg-control-height-lg: 3rem;
    --rg-container-sm: 42rem;
    --rg-container-md: 64rem;
    --rg-container-lg: 80rem;
    --rg-breakpoint-mobile: 30rem;
    --rg-breakpoint-tablet: 48rem;
    --rg-breakpoint-desktop: 80rem;
    --rg-duration-fast: 120ms;
    --rg-duration-normal: 180ms;
    --rg-duration-slow: 260ms;
    --rg-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --rg-z-base: 0;
    --rg-z-sticky: 1020;
    --rg-z-header: 1030;
    --rg-z-overlay: 1040;
    --rg-z-modal: 1055;
    --rg-z-toast: 1090;

    /* Restrained ambient treatments */
    --rg-aura-canvas:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .08), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(15, 118, 110, .06), transparent 30%),
        var(--rg-color-canvas);

    /* Legacy compatibility aliases used throughout the current templates. */
    --rs-primary: var(--rg-color-primary);
    --rs-primary-dark: var(--rg-color-primary-hover);
    --rs-primary-soft: var(--rg-color-primary-soft);
    --rs-accent: var(--rg-color-secondary);
    --rs-accent-soft: var(--rg-color-secondary-soft);
    --rs-warning: var(--rg-color-warning);
    --rs-danger: var(--rg-color-error);
    --rs-bg: var(--rg-color-canvas);
    --rs-surface: var(--rg-color-surface);
    --rs-surface-muted: var(--rg-color-surface-muted);
    --rs-border: var(--rg-color-border);
    --rs-border-strong: var(--rg-color-border-strong);
    --rs-text: var(--rg-color-text);
    --rs-muted: var(--rg-color-text-muted);
    --rs-subtle: var(--rg-color-text-subtle);
    --rs-shadow-sm: var(--rg-shadow-sm);
    --rs-shadow: var(--rg-shadow-md);
    --rs-radius: var(--rg-radius-md);
    --rs-radius-sm: var(--rg-radius-sm);
    --rs-sidebar: 280px;
    --rs-topbar: 68px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --rg-color-primary: #93c5fd;
    --rg-color-primary-hover: #bfdbfe;
    --rg-color-primary-soft: rgba(59, 130, 246, .16);
    --rg-color-secondary: #6ee7b7;
    --rg-color-secondary-hover: #a7f3d0;
    --rg-color-secondary-soft: rgba(16, 185, 129, .15);
    --rg-color-canvas: #0b1220;
    --rg-color-surface: #111827;
    --rg-color-surface-muted: #172033;
    --rg-color-surface-raised: #172033;
    --rg-color-text: #f8fafc;
    --rg-color-text-muted: #cbd5e1;
    --rg-color-text-subtle: #94a3b8;
    --rg-color-border: rgba(148, 163, 184, .24);
    --rg-color-border-strong: rgba(148, 163, 184, .38);
    --rg-color-focus: #93c5fd;
    --rg-focus-ring: 0 0 0 3px rgba(147, 197, 253, .32);
    --rg-color-success: #6ee7b7;
    --rg-color-success-soft: rgba(16, 185, 129, .15);
    --rg-color-warning: #fcd34d;
    --rg-color-warning-soft: rgba(245, 158, 11, .16);
    --rg-color-error: #fca5a5;
    --rg-color-error-soft: rgba(239, 68, 68, .16);
    --rg-color-info: #93c5fd;
    --rg-color-info-soft: rgba(59, 130, 246, .16);
    --rg-color-rating-star: #fbbf24;
    --rg-color-draft: #fdba74;
    --rg-color-draft-border: #c2410c;
    --rg-color-draft-soft: rgba(249, 115, 22, .16);
    --rg-action-primary-background: #f8fafc;
    --rg-action-primary-foreground: #0f172a;
    --rg-action-primary-border: #f8fafc;
    --rg-action-primary-hover: #e2e8f0;
    --rg-action-primary-active: #cbd5e1;
    --rg-action-primary-disabled: #94a3b8;
    --rg-status-queued: #cbd5e1;
    --rg-status-queued-soft: rgba(148, 163, 184, .14);
    --rg-status-processing: #93c5fd;
    --rg-status-processing-soft: rgba(59, 130, 246, .16);
    --rg-status-retrying: #fdba74;
    --rg-status-retrying-soft: rgba(249, 115, 22, .16);
    --rg-status-completed: #6ee7b7;
    --rg-status-completed-soft: rgba(16, 185, 129, .15);
    --rg-status-action-required: #fca5a5;
    --rg-status-action-required-soft: rgba(239, 68, 68, .16);
    --rg-status-draft-ready: var(--rg-color-draft);
    --rg-status-draft-ready-soft: var(--rg-color-draft-soft);
    --rg-status-cancelled: #cbd5e1;
    --rg-status-cancelled-soft: rgba(148, 163, 184, .14);
    --rg-status-skipped: #c4b5fd;
    --rg-status-skipped-soft: rgba(139, 92, 246, .16);
    --rg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --rg-shadow-md: 0 18px 44px rgba(0, 0, 0, .38);
    --rg-shadow-lg: 0 28px 72px rgba(0, 0, 0, .48);
    --rg-aura-canvas:
        radial-gradient(circle at 12% 0%, rgba(59, 130, 246, .11), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(16, 185, 129, .07), transparent 30%),
        var(--rg-color-canvas);
}

/* Page and heading primitives */
.rg-page-container {
    width: min(100%, var(--rg-container-lg));
    margin-inline: auto;
}

.rg-page-heading,
.rg-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rg-space-4);
}

.rg-page-heading { margin-bottom: var(--rg-space-8); }
.rg-section-heading { margin-bottom: var(--rg-space-5); }
.rg-page-heading h1,
.rg-section-heading h2 { margin: 0; color: var(--rg-color-text); font-family: var(--rg-font-display); line-height: var(--rg-line-height-tight); }
.rg-page-heading h1 { font-size: var(--rg-font-size-3xl); }
.rg-section-heading h2 { font-size: var(--rg-font-size-xl); }
.rg-page-heading p,
.rg-section-heading p { max-width: 46rem; margin: var(--rg-space-2) 0 0; color: var(--rg-color-text-muted); line-height: var(--rg-line-height-body); }

/* Buttons and icon controls */
.rg-button,
.rg-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rg-space-2);
    min-height: var(--rg-control-height-md);
    border: 1px solid transparent;
    border-radius: var(--rg-radius-sm);
    font: inherit;
    font-size: var(--rg-font-size-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--rg-duration-normal) var(--rg-ease-standard), border-color var(--rg-duration-normal) var(--rg-ease-standard), color var(--rg-duration-normal) var(--rg-ease-standard), box-shadow var(--rg-duration-normal) var(--rg-ease-standard), transform var(--rg-duration-fast) var(--rg-ease-standard);
}

.rg-button { padding: .7rem 1rem; }
.rg-icon-button { width: var(--rg-control-height-md); padding: 0; }
.rg-button--primary {
    border-color: var(--rg-action-primary-border);
    background: var(--rg-action-primary-background);
    color: var(--rg-action-primary-foreground);
}
.rg-button--primary:hover {
    border-color: var(--rg-action-primary-hover);
    background: var(--rg-action-primary-hover);
    color: var(--rg-action-primary-foreground);
}
.rg-button--primary:active {
    border-color: var(--rg-action-primary-active);
    background: var(--rg-action-primary-active);
    color: var(--rg-action-primary-foreground);
}
.rg-button--secondary,
.rg-icon-button { border-color: var(--rg-color-border-strong); background: var(--rg-color-surface); color: var(--rg-color-text); }
.rg-button--secondary:hover,
.rg-icon-button:hover { border-color: var(--rg-color-primary); color: var(--rg-color-primary); }
.rg-button--danger { border-color: var(--rg-color-error); background: var(--rg-color-error); color: #fff; }
.rg-button--danger:hover { background: #991b1b; color: #fff; }
.rg-button:disabled,
.rg-icon-button:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.rg-button--primary:disabled {
    border-color: var(--rg-action-primary-disabled);
    background: var(--rg-action-primary-disabled);
    color: var(--rg-action-primary-foreground);
}

/* Forms, search and filters */
.rg-field { display: grid; gap: var(--rg-space-2); }
.rg-field label { color: var(--rg-color-text); font-size: var(--rg-font-size-sm); font-weight: 700; }
.rg-field__hint,
.rg-helper-text,
.rg-timestamp { color: var(--rg-color-text-subtle); font-size: var(--rg-font-size-xs); line-height: var(--rg-line-height-body); }
.rg-control,
.rg-search-field {
    width: 100%;
    min-height: var(--rg-control-height-md);
    border: 1px solid var(--rg-color-border-strong);
    border-radius: var(--rg-radius-sm);
    background: var(--rg-color-surface);
    color: var(--rg-color-text);
    font: inherit;
}
.rg-control { padding: .65rem .8rem; }
.rg-search-field { padding: .65rem .8rem .65rem 2.6rem; }
.rg-search { position: relative; }
.rg-search > i { position: absolute; top: 50%; left: .9rem; color: var(--rg-color-text-subtle); transform: translateY(-50%); pointer-events: none; }
.rg-filter-bar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--rg-space-3); }

/* Cards */
.rg-card,
.rg-metric-card,
.rg-action-card {
    border: 1px solid var(--rg-color-border);
    border-radius: var(--rg-radius-lg);
    background: var(--rg-color-surface);
    color: var(--rg-color-text);
}
.rg-card { padding: var(--rg-space-6); box-shadow: var(--rg-shadow-sm); }
.rg-card--elevated,
.rg-action-card { box-shadow: var(--rg-shadow-md); }
.rg-metric-card { display: grid; gap: var(--rg-space-2); min-width: 0; padding: var(--rg-space-5); }
.rg-metric-card__label { color: var(--rg-color-text-muted); font-size: var(--rg-font-size-sm); font-weight: 650; }
.rg-metric-card__value { color: var(--rg-color-text); font-size: var(--rg-font-size-2xl); font-weight: 800; line-height: var(--rg-line-height-tight); }
.rg-metric-card__detail { color: var(--rg-color-text-subtle); font-size: var(--rg-font-size-xs); }
.rg-action-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--rg-space-4); padding: var(--rg-space-6); }

/* Statuses and alerts include visible text; colour is supplementary. */
.rg-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 1.75rem;
    padding: .25rem .65rem;
    border: 1px solid currentColor;
    border-radius: var(--rg-radius-pill);
    font-size: var(--rg-font-size-xs);
    font-weight: 750;
    line-height: 1.2;
}
.rg-status::before { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; content: ""; }
.rg-status--queued { background: var(--rg-status-queued-soft); color: var(--rg-status-queued); }
.rg-status--processing { background: var(--rg-status-processing-soft); color: var(--rg-status-processing); }
.rg-status--retrying { background: var(--rg-status-retrying-soft); color: var(--rg-status-retrying); }
.rg-status--completed { background: var(--rg-status-completed-soft); color: var(--rg-status-completed); }
.rg-status--action-required { background: var(--rg-status-action-required-soft); color: var(--rg-status-action-required); }
.rg-status--draft-ready {
    border-color: var(--rg-color-draft-border);
    background: var(--rg-status-draft-ready-soft);
    color: var(--rg-status-draft-ready);
}
.rg-status--cancelled { background: var(--rg-status-cancelled-soft); color: var(--rg-status-cancelled); }
.rg-status--skipped { background: var(--rg-status-skipped-soft); color: var(--rg-status-skipped); }

/* Apply only to genuine rating stars; decorative sparkle icons stay unchanged. */
.rg-rating-star { color: var(--rg-color-rating-star); }

.rg-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rg-space-3);
    padding: var(--rg-space-4);
    border: 1px solid var(--rg-color-border);
    border-radius: var(--rg-radius-md);
    color: var(--rg-color-text);
}
.rg-alert strong { display: block; margin-bottom: var(--rg-space-1); }
.rg-alert p { margin: 0; color: inherit; }
.rg-alert--info { border-color: var(--rg-color-info); background: var(--rg-color-info-soft); color: var(--rg-color-info); }
.rg-alert--success { border-color: var(--rg-color-success); background: var(--rg-color-success-soft); color: var(--rg-color-success); }
.rg-alert--warning { border-color: var(--rg-color-warning); background: var(--rg-color-warning-soft); color: var(--rg-color-warning); }
.rg-alert--error { border-color: var(--rg-color-error); background: var(--rg-color-error-soft); color: var(--rg-color-error); }

/* Empty, loading and error states */
.rg-state {
    display: grid;
    justify-items: center;
    gap: var(--rg-space-3);
    padding: var(--rg-space-10) var(--rg-space-6);
    border: 1px dashed var(--rg-color-border-strong);
    border-radius: var(--rg-radius-lg);
    background: var(--rg-color-surface-muted);
    color: var(--rg-color-text-muted);
    text-align: center;
}
.rg-state > i { color: var(--rg-color-primary); font-size: 1.75rem; }
.rg-state h3 { margin: 0; color: var(--rg-color-text); font-size: var(--rg-font-size-lg); }
.rg-state p { max-width: 34rem; margin: 0; }
.rg-state--error { border-style: solid; border-color: var(--rg-color-error); background: var(--rg-color-error-soft); }
.rg-state--error > i { color: var(--rg-color-error); }
.rg-skeleton { position: relative; overflow: hidden; min-height: 1rem; border-radius: var(--rg-radius-sm); background: var(--rg-color-border); }
.rg-skeleton::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); content: ""; animation: rg-skeleton-shimmer 1.4s ease-in-out infinite; }

/* Tables, pagination and progress */
.rg-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--rg-color-border); border-radius: var(--rg-radius-md); background: var(--rg-color-surface); }
.rg-table { width: 100%; min-width: 42rem; margin: 0; border-collapse: collapse; color: var(--rg-color-text); }
.rg-table th,
.rg-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--rg-color-border); text-align: left; vertical-align: middle; }
.rg-table th { background: var(--rg-color-surface-muted); color: var(--rg-color-text-muted); font-size: var(--rg-font-size-xs); letter-spacing: .04em; text-transform: uppercase; }
.rg-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--rg-space-3); }
.rg-progress { display: grid; gap: var(--rg-space-2); }
.rg-progress__meta { display: flex; justify-content: space-between; gap: var(--rg-space-3); color: var(--rg-color-text-muted); font-size: var(--rg-font-size-sm); }
.rg-progress__track { overflow: hidden; height: .65rem; border-radius: var(--rg-radius-pill); background: var(--rg-color-border); }
.rg-progress__bar { display: block; width: var(--rg-progress, 0%); height: 100%; border-radius: inherit; background: var(--rg-color-primary); }

/* Modal composition; attach to an existing Bootstrap .modal-content. */
.rg-modal { max-height: min(90dvh, 52rem); overflow: hidden; }
.rg-modal__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rg-modal__footer { position: sticky; z-index: 1; bottom: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--rg-space-3); border-top: 1px solid var(--rg-color-border); background: var(--rg-color-surface); }

/* Workspace navigation primitive for later incremental adoption. */
.rg-workspace-nav { display: flex; max-width: 100%; gap: var(--rg-space-2); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.rg-workspace-nav__link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: var(--rg-space-2); min-height: var(--rg-control-height-md); padding: 0 var(--rg-space-4); border-radius: var(--rg-radius-sm); color: var(--rg-color-text-muted); font-size: var(--rg-font-size-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.rg-workspace-nav__link:hover,
.rg-workspace-nav__link[aria-current="page"] { background: var(--rg-color-primary-soft); color: var(--rg-color-primary); }

:where(.rg-button, .rg-icon-button, .rg-control, .rg-search-field, .rg-workspace-nav__link):focus-visible {
    outline: 2px solid var(--rg-color-focus);
    outline-offset: 2px;
    box-shadow: var(--rg-focus-ring);
}

@keyframes rg-skeleton-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@media (max-width: 767.98px) {
    .rg-card,
    .rg-action-card { padding: var(--rg-space-5); }
    .rg-filter-bar > * { width: 100%; }
    .rg-action-card { align-items: stretch; }
    .rg-action-card .rg-button { width: 100%; }
    .rg-modal { max-height: 94dvh; }
    .rg-modal__footer { align-items: stretch; }
    .rg-modal__footer .rg-button { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 479.98px) {
    .rg-page-heading { margin-bottom: var(--rg-space-6); }
    .rg-page-heading h1 { font-size: 1.65rem; }
    .rg-card,
    .rg-action-card,
    .rg-state { padding: var(--rg-space-4); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .rg-skeleton::after { display: none; }
}

@media (forced-colors: active) {
    .rg-button,
    .rg-icon-button,
    .rg-status,
    .rg-alert,
    .rg-card,
    .rg-metric-card,
    .rg-action-card,
    .rg-state,
    .rg-table-wrap { border: 1px solid CanvasText; }

    .rg-status::before,
    .rg-skeleton::after { display: none; }

    .rg-rating-star { color: CanvasText; }
}