/* Shared visual tokens for the Django web UI. */
:root {
  --bg: #f4f6fc;
  --panel: #ffffff;
  --border: #d5d2d2;
  --text: #0f172a;
  --muted: #390e1d;

  --primary: #190909;
  --primary-dark: #000000;
  --primary-accent: #bf1a1a;
  --primary-soft: #ffd2da;
  --green: var(--primary);

  --info-soft: #e9f8f8;
  --warning-soft: #fff4de;
  --error-soft: #fde6e6;
  --error-text: #8d1f1f;
  --warning-text: #8a5a0a;

  --disabled-bg: #eef2fb;
  --disabled-border: #cfd8ee;
  --disabled-text: #8a94b3;

  --font-sans: "Space Grotesk", "Inter", system-ui, sans-serif;

  --radius-sm: 0.625rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --shadow-soft: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
  --shadow-strong: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
  --shadow-panel: 0 1.125rem 2.625rem rgba(36, 68, 163, 0.12);
  --shadow-floating-soft: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.05);
  --shadow-hero-card: 0 1.375rem 3.375rem rgba(36, 68, 163, 0.14);

  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.375rem;
  --space-2xl: 1.75rem;
  --space-3xl: 2.5rem;

  --focus-ring: #cf3131;
  --surface-hover: #f5f8ff;
  --surface-active: #eaf0ff;
  --surface-elevated: linear-gradient(180deg, #ffffff, #f8fbff);
  --surface-overlay: rgba(255, 255, 255, 0.94);
  --surface-backdrop: rgba(255, 255, 255, 0.9);
  --surface-hero-card: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
  --surface-soft: var(--primary-soft);
  --surface-canvas:
    radial-gradient(circle at top left, rgb(230 62 138 / 0.12), transparent 34%),
    radial-gradient(circle at top right, rgb(207 49 91 / 0.08), transparent 30%),
    linear-gradient(180deg, #f8faff 0%, #f1f5ff 38%, #f4f6fc 100%);
  --surface-panel-tint:
    linear-gradient(135deg, rgba(49, 88, 207, 0.08), rgba(62, 106, 230, 0.03));
  --surface-table-frame: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 255, 0.94));
  --surface-table-head: linear-gradient(180deg, #ffeeee, #ffe3e3);
  --surface-border-soft: color-mix(in srgb, var(--primary) 10%, var(--border) 90%);
  --surface-border-strong: color-mix(in srgb, var(--primary) 18%, var(--border) 82%);
  --surface-inline-bg: var(--panel);
  --surface-inline-border: var(--border);
  --surface-inline-hover: var(--surface-hover);
  --surface-inline-active: var(--surface-active);
  --surface-inline-selected-bg: var(--panel);
  --surface-inline-selected-border: color-mix(in srgb, var(--primary) 22%, var(--border) 78%);
  --surface-inline-selected-text: var(--primary-dark);
  --surface-inline-selected-shadow: 0 0.5rem 1.125rem rgba(37, 99, 235, 0.14);
  --chip-bg: var(--panel);
  --chip-border: var(--border);
  --chip-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.04);
  --chip-remove-hover: var(--surface-hover);
  --chip-remove-active: var(--surface-active);
  --table-row-odd-bg: #ffdbdb;
  --table-row-even-bg: #FFC1C1FF;
  --table-row-hover-bg: #fde8e8;
  --table-resize-indicator: rgba(15, 23, 42, 0.18);
  --table-sticky-shadow-left: 0.625rem 0 1rem rgba(15, 23, 42, 0.06);
  --table-sticky-shadow-right: -0.625rem 0 1rem rgba(15, 23, 42, 0.06);
  --tag-info-bg: var(--primary-soft);
  --tag-info-text: var(--primary-dark);
  --tag-success-bg: color-mix(in srgb, #2e7d32 16%, white 84%);
  --tag-success-text: #256628;

  --btn-text-on-accent: #ffffff;
  --btn-primary-bg: var(--primary-dark);
  --btn-primary-bg-hover: #454444;
  --btn-primary-bg-active: #191313;
  --btn-primary-shadow: 0 0.625rem 1.25rem rgba(36, 68, 163, 0.18);

  --btn-secondary-bg: var(--panel);
  --btn-secondary-bg-hover: var(--surface-hover);
  --btn-secondary-bg-active: var(--surface-active);
  --btn-secondary-border: var(--border);
  --btn-secondary-text: var(--text);

  --btn-danger-bg: #b91c1c;
  --btn-danger-bg-hover: #991b1b;
  --btn-danger-bg-active: #7f1d1d;

  --btn-file-pdf-bg: #c62828;
  --btn-file-pdf-hover: #a61f1f;
  --btn-file-pdf-active: #8b1b1b;
  --btn-file-excel-bg: #2e7d32;
  --btn-file-excel-hover: #256628;
  --btn-file-excel-active: #1d5320;
  --size-icon-button: 2.75rem;
  --font-size-icon-close: 1.75rem;
  --size-count-pill-min-width: 3.25rem;
  --size-count-pill-min-height: 2.5rem;
  --size-count-pill-inline-min-width: 2.75rem;
  --size-count-pill-inline-min-height: 2.125rem;
  --panel-accent-height: 0.25rem;
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}