/*
  RecordStack design tokens — the single source of truth for color, spacing, type, radius and shadow.

  CONVENTION: this is the ONLY stylesheet allowed to contain raw color literals (hex/rgb/hsl).
  Every other stylesheet (components.css, app.css, and per-component *.razor.css) MUST reference
  these custom properties via var(--rs-...). Adding a new color/space/size? Add a token here first.

  Tokens are split into a primitive palette (the raw scale) and semantic roles (what the UI calls
  them). Components reference semantic roles, never the primitives, so a future theme/visual-design
  pass (E1 is utilitarian-first) only has to remap the roles.
*/

:root {
    /* ---- Primitive palette (raw values — the only hex in the codebase) ---- */
    --rs-palette-white: #ffffff;
    --rs-palette-black: #0b0d10;

    --rs-palette-gray-50: #f7f8fa;
    --rs-palette-gray-100: #eceef2;
    --rs-palette-gray-200: #dfe3e9;
    --rs-palette-gray-300: #c6ccd6;
    --rs-palette-gray-400: #9aa3b2;
    --rs-palette-gray-500: #6b7483;
    --rs-palette-gray-600: #4d5563;
    --rs-palette-gray-700: #363d49;
    --rs-palette-gray-800: #232932;
    --rs-palette-gray-900: #161a20;

    --rs-palette-blue-100: #dceaff;
    --rs-palette-blue-400: #60a5fa;
    --rs-palette-blue-500: #2563eb;
    --rs-palette-blue-600: #1d4ed8;
    --rs-palette-blue-700: #1e40af;

    /* Indigo — the product accent (matches the dashboard design language). */
    --rs-palette-indigo-50: #eef2ff;
    --rs-palette-indigo-100: #e0e7ff;
    --rs-palette-indigo-300: #a5b4fc;
    --rs-palette-indigo-400: #818cf8;
    --rs-palette-indigo-500: #6366f1;
    --rs-palette-indigo-600: #4f46e5;
    --rs-palette-indigo-700: #4338ca;

    /* Violet — a secondary tint used for icon chips. */
    --rs-palette-violet-100: #f3e8ff;
    --rs-palette-violet-300: #c4b5fd;
    --rs-palette-violet-600: #7c3aed;

    --rs-palette-green-100: #d7f5e3;
    --rs-palette-green-400: #4ade80;
    --rs-palette-green-600: #15803d;
    --rs-palette-green-700: #166534;

    --rs-palette-amber-100: #fdecc8;
    --rs-palette-amber-400: #fbbf24;
    --rs-palette-amber-600: #b45309;

    --rs-palette-red-100: #fde0e0;
    --rs-palette-red-300: #fca5a5;
    --rs-palette-red-400: #f87171;
    --rs-palette-red-500: #dc2626;
    --rs-palette-red-600: #b91c1c;
    --rs-palette-red-700: #991b1b;

    /* Dark-theme surface ramp (only consumed by the html[data-theme="dark"] role remap below). A
       near-black background with progressively lighter surfaces, and two border stops that carry the
       elevation work that shadows do in the light theme. */
    --rs-palette-dark-bg: #0d1117;
    --rs-palette-dark-surface: #161b22;
    --rs-palette-dark-surface-muted: #21262d;
    --rs-palette-dark-border: #2d333b;
    --rs-palette-dark-border-strong: #444c56;

    /* ---- Semantic color roles (reference the palette above) ---- */
    --rs-color-bg: var(--rs-palette-gray-50);
    --rs-color-surface: var(--rs-palette-white);
    --rs-color-surface-muted: var(--rs-palette-gray-100);
    --rs-color-overlay: rgba(11, 13, 16, 0.45);

    --rs-color-fg: var(--rs-palette-gray-900);
    --rs-color-fg-muted: var(--rs-palette-gray-500);
    --rs-color-fg-on-accent: var(--rs-palette-white);

    --rs-color-border: var(--rs-palette-gray-200);
    --rs-color-border-strong: var(--rs-palette-gray-300);

    --rs-color-accent: var(--rs-palette-indigo-500);
    --rs-color-accent-hover: var(--rs-palette-indigo-600);
    --rs-color-accent-active: var(--rs-palette-indigo-700);
    --rs-color-accent-subtle: var(--rs-palette-indigo-50);

    /* Brand colour — a darker, truer blue than the indigo accent, used for the logo + wordmark. */
    --rs-color-brand: var(--rs-palette-blue-700);

    --rs-color-success: var(--rs-palette-green-600);
    --rs-color-success-strong: var(--rs-palette-green-700);
    --rs-color-success-subtle: var(--rs-palette-green-100);

    --rs-color-warning: var(--rs-palette-amber-600);
    --rs-color-warning-subtle: var(--rs-palette-amber-100);

    --rs-color-error: var(--rs-palette-red-600);
    --rs-color-error-hover: var(--rs-palette-red-700);
    --rs-color-error-strong: var(--rs-palette-red-500);
    --rs-color-error-subtle: var(--rs-palette-red-100);

    --rs-color-focus-ring: var(--rs-palette-indigo-500);

    /* ---- Data-grid roles (record grids — consumed by Phase 4's RecordGrid) ----
       Stacking order on a surface(white) row: surface < stripe < hover < selected, so a hovered or
       selected row still reads over the zebra stripe. */
    --rs-color-grid-header-bg: var(--rs-color-bg);
    --rs-color-row-stripe: rgba(11, 13, 16, 0.022);
    --rs-color-row-hover: var(--rs-palette-gray-100);
    --rs-color-row-selected: var(--rs-color-accent-subtle);
    /* Additive hover overlay for controls sitting on top of variable backgrounds (e.g. a row-actions kebab on a
       striped/hovered row): translucent black in light, translucent white in dark, so it always darkens/lightens
       whatever is beneath rather than matching a fixed surface that could equal the row's own hover tint. */
    --rs-color-overlay-hover: rgba(11, 13, 16, 0.06);

    /* Tinted icon-chip backgrounds (dashboard database-card glyphs and similar). */
    --rs-color-chip-indigo-bg: var(--rs-palette-indigo-50);
    --rs-color-chip-indigo-fg: var(--rs-palette-indigo-600);
    --rs-color-chip-green-bg: var(--rs-palette-green-100);
    --rs-color-chip-green-fg: var(--rs-palette-green-600);
    --rs-color-chip-violet-bg: var(--rs-palette-violet-100);
    --rs-color-chip-violet-fg: var(--rs-palette-violet-600);

    /* ---- Spacing scale (4px base) ---- */
    --rs-space-0: 0;
    --rs-space-1: 0.25rem;
    --rs-space-2: 0.5rem;
    --rs-space-3: 0.75rem;
    --rs-space-4: 1rem;
    --rs-space-5: 1.5rem;
    --rs-space-6: 2rem;
    --rs-space-8: 3rem;

    /* ---- Density scale (record grids / data-dense screens) ----
       Comfortable is the :root default. Put data-density="compact" on an ancestor to remap these
       denser (see the [data-density] blocks below); Phase 4's RecordGrid drives that attribute from a
       per-user preference. Data surfaces read these instead of the raw --rs-space-* steps so one
       switch retunes row height, cell padding and type together. The styleguide previews both. */
    --rs-density-row-min-height: 2.75rem;
    --rs-density-cell-pad-y: var(--rs-space-3);
    --rs-density-cell-pad-x: var(--rs-space-4);
    --rs-density-font-size: var(--rs-text-sm);
    --rs-density-line-height: var(--rs-line-height-snug);

    /* ---- Typography ---- */
    --rs-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --rs-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
    --rs-font-brand: "Agdasima", var(--rs-font-sans);

    --rs-text-xs: 0.75rem;
    --rs-text-sm: 0.875rem;
    --rs-text-md: 1rem;
    --rs-text-lg: 1.25rem;
    --rs-text-xl: 1.5rem;
    --rs-text-2xl: 2rem;

    --rs-font-weight-normal: 400;
    --rs-font-weight-medium: 500;
    --rs-font-weight-semibold: 600;
    --rs-font-weight-bold: 700;

    --rs-line-height-tight: 1.2;
    --rs-line-height-snug: 1.35;
    --rs-line-height-normal: 1.5;

    /* Tabular, lining numerals so columns of numbers/ids align in grids (via the .rs-numeric helper). */
    --rs-font-variant-numeric: tabular-nums lining-nums;

    /* ---- Radius ---- */
    --rs-radius-sm: 0.25rem;
    --rs-radius-md: 0.5rem;
    --rs-radius-lg: 0.75rem;
    --rs-radius-xl: 1rem;
    --rs-radius-pill: 9999px;

    /* ---- Shadows (soft, diffuse — the dashboard's elevation language) ---- */
    --rs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --rs-shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
    --rs-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

    /* ---- Layout ---- */
    --rs-container-max: 72rem;
    --rs-focus-ring-width: 2px;
    --rs-sidebar-width: 16rem;
    /* Collapsed icon-rail width for the immersive database shell (issue #124) — icons-only, no labels. */
    --rs-rail-width: 4.25rem;
    --rs-topbar-height: 4.5rem;
    /* Shared height for every in-database workspace bar — the records toolbar, the table-master "TABLES" header,
       and the bottom pager/action bars all use it (with a uniform --rs-space-3 padding) so their dividers align
       and the spacing around their controls is identical. Seats a default-height control with even breathing room. */
    --rs-workspace-header-height: 3.8rem;

    /* Interactive control heights — keep buttons, the search field, the segmented control and icon
       buttons aligned. Compact is the default row height; -lg is the larger (medium) button. */
    --rs-control-height: 2.25rem;
    --rs-control-height-lg: 2.5rem;
}

/*
  ---- Density remap ----

  Comfortable is the :root default above. data-density="compact" on any ancestor remaps the density
  scale denser — more rows on screen for data-heavy work. An explicit "comfortable" block is provided
  too so a comfortable subtree can sit inside a compact ancestor (and so the styleguide can show both
  side by side). Only the --rs-density-* tokens change; nothing else.
*/
[data-density="comfortable"] {
    --rs-density-row-min-height: 2.75rem;
    --rs-density-cell-pad-y: var(--rs-space-3);
    --rs-density-cell-pad-x: var(--rs-space-4);
    --rs-density-font-size: var(--rs-text-sm);
    --rs-density-line-height: var(--rs-line-height-snug);
}

[data-density="compact"] {
    --rs-density-row-min-height: 2rem;
    --rs-density-cell-pad-y: var(--rs-space-1);
    --rs-density-cell-pad-x: var(--rs-space-3);
    --rs-density-font-size: var(--rs-text-xs);
    --rs-density-line-height: var(--rs-line-height-snug);
}

/*
  ---- Dark theme (Phase 3) ----

  By design, only the SEMANTIC ROLES are remapped here — the primitive palette above is untouched and no
  component CSS changes, because every component references roles, never primitives. data-theme lives on
  <html> (not <body>) so the no-FOUC pre-paint script and SSR agree on the same element.

  Two deliberate dark-mode adjustments beyond a straight swap:
  - Interactive states LIGHTEN instead of darken (hover/active accent + error go to lighter stops), which
    is the correct affordance direction on a dark surface. These same tokens double as text-on-subtle in
    Badge/ErrorDisplay, so the lighter values also keep that text legible.
  - Shadows lean darker (and elevation is carried mostly by the lighter border stops), since soft light
    shadows are invisible on a near-black background.
*/
html[data-theme="dark"] {
    --rs-color-bg: var(--rs-palette-dark-bg);
    --rs-color-surface: var(--rs-palette-dark-surface);
    --rs-color-surface-muted: var(--rs-palette-dark-surface-muted);
    --rs-color-overlay: rgba(0, 0, 0, 0.6);

    --rs-color-fg: var(--rs-palette-gray-50);
    --rs-color-fg-muted: var(--rs-palette-gray-400);
    /* --rs-color-fg-on-accent stays white — the accent fill is still indigo. */

    --rs-color-border: var(--rs-palette-dark-border);
    --rs-color-border-strong: var(--rs-palette-dark-border-strong);

    /* Accent fill stays indigo-500; hover/active lighten (the dark-mode direction) and also serve as the
       legible text colour on the translucent accent-subtle tint. */
    --rs-color-accent: var(--rs-palette-indigo-500);
    --rs-color-accent-hover: var(--rs-palette-indigo-400);
    --rs-color-accent-active: var(--rs-palette-indigo-300);
    --rs-color-accent-subtle: rgba(99, 102, 241, 0.18);

    /* Brand blue-700 is too dark to read on a dark sidebar — lift to a brighter blue for the logo/wordmark. */
    --rs-color-brand: var(--rs-palette-blue-400);

    --rs-color-success: var(--rs-palette-green-400);
    --rs-color-success-strong: var(--rs-palette-green-400);
    --rs-color-success-subtle: rgba(34, 197, 94, 0.16);

    --rs-color-warning: var(--rs-palette-amber-400);
    --rs-color-warning-subtle: rgba(245, 158, 11, 0.16);

    --rs-color-error: var(--rs-palette-red-400);
    --rs-color-error-hover: var(--rs-palette-red-300);
    --rs-color-error-strong: var(--rs-palette-red-400);
    --rs-color-error-subtle: rgba(220, 38, 38, 0.20);

    --rs-color-focus-ring: var(--rs-palette-indigo-400);

    /* Chip/badge tints: translucent so they sit on any dark surface, with light glyph colours. */
    --rs-color-chip-indigo-bg: rgba(99, 102, 241, 0.18);
    --rs-color-chip-indigo-fg: var(--rs-palette-indigo-300);
    --rs-color-chip-green-bg: rgba(34, 197, 94, 0.16);
    --rs-color-chip-green-fg: var(--rs-palette-green-400);
    --rs-color-chip-violet-bg: rgba(124, 58, 237, 0.24);
    --rs-color-chip-violet-fg: var(--rs-palette-violet-300);

    /* Lean on darker shadows + the lighter borders above for elevation on dark. */
    --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --rs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --rs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

    /* Data-grid roles on dark: tints lift with translucent white (stripe < hover); selected reuses the
       translucent accent-subtle. */
    --rs-color-grid-header-bg: var(--rs-palette-dark-surface-muted);
    --rs-color-row-stripe: rgba(255, 255, 255, 0.025);
    --rs-color-row-hover: rgba(255, 255, 255, 0.05);
    --rs-color-row-selected: var(--rs-color-accent-subtle);
    --rs-color-overlay-hover: rgba(255, 255, 255, 0.10);
}