:root {
  --color-primary: #c79a6b;
  --color-primary-hover: #d9b184;
  --color-secondary: #e3c49b;

  --color-background: #070707;
  --color-surface: #111315;
  --color-surface-muted: #1b2024;

  --color-text: #f4f0ea;
  --color-text-muted: #b8ada4;
  --color-text-subtle: #e3c49b;
  --color-border: #30363d;
  --color-border-muted: #30363d;
  --color-glow: rgba(199, 154, 107, 0.18);
  --color-grid-line: rgba(199, 154, 107, 0.08);
  --color-login-top: #17110c;
  --color-login-sheen: rgba(255, 255, 255, 0.035);

  --color-success: #5fbf9b;
  --color-warning: #d9a441;
  --color-danger: #d66a5e;
  --color-button-shadow: rgba(199, 154, 107, 0.24);
  --color-button-shadow-hover: rgba(199, 154, 107, 0.36);

  --background-app:
  linear-gradient(135deg, var(--color-login-sheen), transparent 36%),
  radial-gradient(circle at top, var(--color-login-top) 0, var(--color-background) 48%);

  --border-width: 1px;

  --font-family:  Segoe UI, Arial, sans-serif;

  --font-size-xs: 0.625rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 0.8125rem;
  --font-size-lg: 0.9375rem;
  --font-size-xl: 1.125rem;
  --font-size-h1: clamp(var(--font-size-xl), 1.2vw, 1.875rem);
  --font-size-header-title: clamp(1.5rem, 1.55vw, 2.25rem);
  --font-size-h2: clamp(var(--font-size-lg), 1vw, 1.5rem);
  --font-size-h3: clamp(var(--font-size-md), 0.85vw, 1.0625rem);
  --font-size-root: clamp(0.8125rem, 0.8rem + 0.1vw, 0.9375rem);
  --line-height-body: 1.35;
  --line-height-heading: 1.08;

  --space-xs: 0.125rem;
  --space-sm: 0.3125rem;
  --space-md: 0.625rem;
  --space-lg: 0.875rem;
  --space-xl: 1.5rem;
  --space-control-padding: 0.4375rem;
  --space-control-min: 2.25rem;
  --space-control-height: 2.125rem;
  --space-logo-height: 3rem;
  --logo-height-sm: 2rem;
  --logo-height-md: 3rem;
  --logo-height-lg: 4rem;
  --space-page-fluid: clamp(0.625rem, 2.4vw, 2.5rem);
  --space-panel-fluid: clamp(0.875rem, 2.4vw, 1.875rem);
  --space-panel-gap: 0.75rem;
  --space-content: clamp(var(--space-lg), 1.2vw, var(--space-xl));
  --grid-size: 3rem;
  --login-grid-size: 3.375rem;

  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;

  --shadow-panel: 0 1.5rem 4rem rgba(0, 0, 0, 0.42);
  --shadow-accent: 0 0 1.5rem rgba(184, 137, 75, 0.18);
  --shadow-button: 0 0.35rem 1rem var(--color-button-shadow);
  --shadow-button-hover: 0 0.5rem 1.4rem var(--color-button-shadow-hover);

  --sidebar-width: clamp(11.9rem, 13.6vw, 17rem);
  --header-height: 2.625rem;
  --content-max-width: 100%;
  --dashboard-card-min: 400px;
  --login-panel-width: min(100%, 24rem);

  --breakpoint-mobile: 40rem;
  --breakpoint-tablet: 64rem;
  --breakpoint-desktop: 90rem;
}