xtablo-source/backend/internal/web/ui/base.css

:root {
  color-scheme: light;
  accent-color: var(--color-brand-primary);

  /* Text */
  --color-text-primary: hsl(0 0% 9%);
  --color-text-secondary: #475467;
  --color-text-muted: hsl(0 0% 43.5%);
  --color-text-faint: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-text-brand: #804eec;
  --color-text-brand-hover: #6f3fd4;
  --color-text-brand-strong: #7c3aed;
  --color-text-brand-accent: #7f56d9;
  --color-text-heading-alt: #1f2937;
  --color-text-body-subtle: #374151;
  --color-text-google: #1f1f1f;
  --color-text-overlay: #344054;
  --color-text-disabled: #667085;

  /* Surfaces */
  --color-surface-page: hsl(0 0% 100%);
  --color-surface-default: #ffffff;
  --color-surface-card: rgba(255, 255, 255, 0.8);
  --color-surface-subtle: hsl(0 0% 96.1%);
  --color-surface-muted: #f3f4f6;
  --color-surface-muted-hover: #e5e7eb;
  --color-surface-muted-active: #d1d5db;
  --color-surface-muted-inverse: #111827;
  --color-surface-elevated: rgba(255, 255, 255, 0.92);
  --color-surface-elevated-strong: rgba(255, 255, 255, 0.95);
  --color-surface-elevated-soft: rgba(255, 255, 255, 0.9);
  --color-surface-overlay: rgba(255, 255, 255, 0.88);
  --color-surface-overlay-strong: rgba(255, 255, 255, 0.96);
  --color-surface-brand-soft: #ede9fe;
  --color-surface-brand-soft-hover: #ddd6fe;
  --color-surface-brand-soft-active: #c4b5fd;
  --color-surface-brand-muted: #f4f3ff;
  --color-surface-neutral-hover: rgba(249, 250, 251, 0.9);
  --color-surface-page-tint: #f8f7ff;
  --color-surface-page-tint-alt: #f4f7fb;

  /* Borders */
  --color-border-default: hsl(0 0% 90.9%);
  --color-border-strong: #d1d5db;
  --color-border-muted: #e5e7eb;
  --color-border-subtle: #d0d5dd;
  --color-border-google: #747775;
  --color-border-panel: rgba(30, 27, 46, 0.08);
  --color-border-panel-muted: rgba(107, 114, 128, 0.22);
  --color-border-panel-strong: rgba(107, 114, 128, 0.35);
  --color-border-overlay: rgba(148, 163, 184, 0.22);
  --color-border-overlay-strong: rgba(148, 163, 184, 0.3);

  /* Brand and focus */
  --color-brand-ink: #1e1b2e;
  --color-brand-primary: #804eec;
  --color-brand-primary-hover: #6d28d9;
  --color-brand-primary-active: #5b21b6;
  --color-brand-secondary: #a855f7;
  --color-brand-accent: #3b82f6;
  --color-focus-ring: rgba(124, 58, 237, 0.2);
  --color-focus-ring-strong: rgba(139, 92, 246, 0.16);
  --color-ring-subtle: rgba(30, 27, 46, 0.35);

  /* Status: info */
  --color-status-info-soft-bg: #eff6ff;
  --color-status-info-soft-border: #bfdbfe;
  --color-status-info-foreground: #2563eb;

  /* Status: warning */
  --color-status-warning-soft-bg: #fff4e2;
  --color-status-warning-soft-border: #db9729;
  --color-status-warning-foreground: #db9729;
  --color-status-warning-strong: #db9729;
  --color-status-warning-strong-hover: #c37f12;
  --color-status-warning-strong-active: #a9670c;
  --color-status-warning-strong-foreground: #ffffff;
  --color-status-warning-soft-foreground-strong: #b86e00;
  --color-status-warning-soft-bg-hover: #fee6b7;
  --color-status-warning-soft-bg-active: #fdd58e;
  --color-status-warning-emphasis-bg: #fffbeb;
  --color-status-warning-emphasis-border: #fde68a;
  --color-status-warning-emphasis-foreground: #ca8a04;

  /* Status: success */
  --color-status-success-soft-bg: #ecfdf3;
  --color-status-success-soft-border: #bbf7d0;
  --color-status-success-foreground: #16a34a;
  --color-status-success-strong: #16a34a;
  --color-status-success-strong-hover: #15803d;
  --color-status-success-strong-active: #166534;
  --color-status-success-strong-foreground: #ffffff;
  --color-status-success-soft-foreground-strong: #15803d;
  --color-status-success-soft-bg-hover: #d1fadf;
  --color-status-success-soft-bg-active: #a6f4c5;
  --color-status-success-banner-bg: hsl(143 85% 96%);
  --color-status-success-banner-border: hsl(145 92% 87%);
  --color-status-success-banner-foreground: hsl(140 100% 27%);

  /* Status: danger */
  --color-status-danger-soft-bg: #fef2f2;
  --color-status-danger-soft-bg-alt: #fef3f2;
  --color-status-danger-soft-border: #fecaca;
  --color-status-danger-foreground: #dc2626;
  --color-status-danger-strong: #dc2626;
  --color-status-danger-strong-hover: #b91c1c;
  --color-status-danger-strong-active: #991b1b;
  --color-status-danger-strong-foreground: #ffffff;
  --color-status-danger-soft-foreground-strong: #b42318;
  --color-status-danger-soft-bg-hover: #fee4e2;
  --color-status-danger-soft-bg-active: #fecdca;
  --color-status-danger-icon-hover: #ef4444;
  --color-status-danger-banner-bg: hsl(359 100% 97%);
  --color-status-danger-banner-border: hsl(359 100% 94%);
  --color-status-danger-banner-foreground: hsl(360 100% 45%);

  /* Effects */
  --overlay-backdrop-default: rgba(17, 24, 39, 0.52);
  --overlay-dark-soft: rgba(30, 27, 46, 0.05);
  --overlay-dark-soft-alt: rgba(30, 27, 46, 0.06);
  --overlay-dark-border: rgba(30, 27, 46, 0.08);
  --overlay-dark-strong: rgba(30, 27, 46, 0.14);
  --overlay-brand-soft: rgba(124, 58, 237, 0.1);
  --overlay-brand-soft-strong: rgba(124, 58, 237, 0.14);
  --overlay-brand-muted: rgba(128, 78, 236, 0.08);
  --overlay-brand-faint: rgba(128, 78, 236, 0.04);
  --overlay-brand-glow: rgba(128, 78, 236, 0.1);
  --overlay-google-state: #303030;
  --shadow-auth-card: 0 20px 45px rgba(0, 0, 0, 0.1);
  --shadow-surface-sm: 0 10px 30px rgba(15, 23, 42, 0.05);
  --shadow-surface-md: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-surface-hover: 0 12px 30px rgba(15, 23, 42, 0.08);
  --shadow-surface-lg: 0 24px 48px rgba(15, 23, 42, 0.18);
  --shadow-surface-xl: 0 32px 70px rgba(15, 23, 42, 0.12);
  --shadow-sidebar: 20px 0 45px rgba(30, 27, 46, 0.06);
  --shadow-floating-control: 0 10px 24px rgba(30, 27, 46, 0.14);
  --shadow-google-button:
    0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --shadow-brand-action: 0 18px 35px rgba(124, 58, 237, 0.25);
  --gradient-shell:
    linear-gradient(135deg, var(--overlay-brand-muted), transparent 30%),
    linear-gradient(160deg, var(--overlay-dark-soft), transparent 42%),
    linear-gradient(to bottom right, var(--overlay-dark-border), var(--color-surface-page), var(--overlay-brand-faint));
  --gradient-card-glow:
    linear-gradient(to bottom right, rgba(30, 27, 46, 0.1), var(--overlay-dark-soft), var(--overlay-brand-glow));
  --gradient-overview-badge:
    linear-gradient(to right, var(--color-brand-secondary), var(--color-brand-accent));
  --gradient-app-surface:
    linear-gradient(180deg, var(--color-surface-overlay-strong) 0%, var(--color-surface-default) 100%);
  --gradient-not-found-bg:
    radial-gradient(circle at top, var(--overlay-brand-soft-strong), transparent 35%),
    linear-gradient(180deg, var(--color-surface-page-tint) 0%, var(--color-surface-page-tint-alt) 100%);
  --gradient-not-found-primary:
    linear-gradient(135deg, var(--color-text-brand-strong) 0%, var(--color-status-info-foreground) 100%);

  /* Runtime fallbacks */
  --color-project-fallback: #3b82f6;
  --color-project-accent-purple: #a855f7;
  --color-project-accent-red: #ef4444;

  /* Legacy aliases */
  --background: var(--color-surface-page);
  --foreground: var(--color-text-primary);
  --muted-foreground: var(--color-text-muted);
  --border: var(--color-border-default);
  --input: var(--color-border-default);
  --card: var(--color-surface-card);
  --accent: var(--color-surface-subtle);
  --primary: var(--color-brand-ink);
  --primary-foreground: var(--color-text-inverse);
  --secondary: var(--color-brand-primary);
  --ring: var(--color-ring-subtle);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.light-only {
  display: block;
}

.dark-only {
  display: none;
}

/* Screen-reader-only text; becomes visible when focused (e.g. skip links). */
.visually-hidden:where(:not(:focus, :focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10000;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-floating-control);
}

.skip-link:focus,
.skip-link:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

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