:root {
  --radius: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --font-display: "Times New Roman MT Std", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;


  /* Match iOS: a quiet warm canvas, with white reserved for raised content. */
  --background: #fafaf9;
  --foreground: #1c1917;
  /* Raised content — the contrast is intentionally subtle, not stark. */
  --card: #ffffff;
  --card-foreground: #1c1917;
  --popover: #ffffff;
  --popover-foreground: #1c1917;


  --hero-bg: #1c1917;
  --hero-foreground: #ffffff;


  --hero-gradient: linear-gradient(135deg, #e7e5e4 0%, #f5f5f4 50%, #fafaf9 100%);
  --hero-gradient-foreground: #1c1917;


  --primary: #1c1917;
  --primary-foreground: #ffffff;
  --accent-rgb: 28, 25, 23;
  --btn-primary-gradient: linear-gradient(135deg, #292524 0%, #1c1917 100%);
  --btn-primary-gradient-hover: linear-gradient(135deg, #1c1917 0%, #000000 100%);

  /* Controls sit one step above the canvas; reserve white for cards/fields. */
  --secondary: #f5f5f4;
  --secondary-foreground: #1c1917;
  --muted: #f5f5f4;
  --muted-foreground: #78716c;
  --accent: #e7e5e4;
  --accent-foreground: #1c1917;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;


  --alert-soft-bg: rgba(0, 0, 0, 0.035);
  --alert-soft-border: rgba(0, 0, 0, 0.1);

  --border: rgba(0, 0, 0, 0.09);
  --input: #f5f5f4;
  --ring: #1c1917;
  --ring-offset: #fafaf9;

  --chart-1: #1c1917;
  --chart-2: #57534e;
  --chart-3: #a8a29e;

  --sidebar: #fafaf9;
  --sidebar-foreground: #1c1917;
  --sidebar-primary: #1c1917;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f5f5f4;
  --sidebar-accent-foreground: #1c1917;
  --sidebar-border: rgba(0, 0, 0, 0.09);
  --sidebar-ring: #1c1917;


  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 20px -4px rgba(0, 0, 0, 0.06);
  --modal-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  --btn-shadow-hover: 0 1px 4px rgba(0, 0, 0, 0.06);
  --btn-shadow-active: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
  --alert-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);


  --dashboard-canvas: #fafaf9;
  --dashboard-panel: #f5f5f4;
  --dashboard-card-elevated: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
  --dashboard-card-elevated-hover: 0 2px 8px rgba(0, 0, 0, 0.05), 0 4px 20px -4px rgba(0, 0, 0, 0.06);


  /* Light: soft stone wash + dark initials (mirrors iOS adaptive placeholders). */
  --avatar-placeholder-gradient: linear-gradient(135deg, #e7e5e4 0%, #d6d3d1 100%);
  --avatar-placeholder-foreground: #1c1917;


  --space-section: 3rem;
  --space-section-lg: 4rem;
  --space-card: 1.5rem;
  --space-card-lg: 2rem;


  --surface-0: #fafaf9;
  --surface-1: #ffffff;
  --surface-2: #f5f5f4;
  --surface-3: #e7e5e4;
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(0, 0, 0, 0.09);
  --glass-blur: 20px;
  --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --card-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --dashboard-gradient-mesh:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(28, 25, 23, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(28, 25, 23, 0.015) 0%, transparent 50%);
  --sidebar-active-indicator: var(--primary);
  --stat-glow: rgba(28, 25, 23, 0.04);


  --selection-bg: var(--primary);
  --selection-fg: var(--primary-foreground);
}


html.dark {
  --background: #0f0f0f;
  --foreground: #e8e8e8;

  --card: #18181b;
  --card-foreground: #e8e8e8;
  --popover: #18181b;
  --popover-foreground: #e8e8e8;

  --hero-bg: #d4d4d4;
  --hero-foreground: #0f0f0f;

  --hero-gradient: linear-gradient(135deg, #e5e5e5 0%, #d4d4d4 50%, #a3a3a3 100%);
  --hero-gradient-foreground: #0f0f0f;

  --primary: #e8e8e8;
  --primary-foreground: #0f0f0f;
  --accent-rgb: 232, 232, 232;
  --btn-primary-gradient: linear-gradient(135deg, #d4d4d4 0%, #e8e8e8 100%);
  --btn-primary-gradient-hover: linear-gradient(135deg, #e8e8e8 0%, #fafafa 100%);

  --secondary: #27272a;
  --secondary-foreground: #e8e8e8;
  --muted: #27272a;
  --muted-foreground: #a3a3a3;
  --accent: #3f3f46;
  --accent-foreground: #e8e8e8;
  --destructive: #ef4444;
  --destructive-foreground: #fff;

  --alert-soft-bg: rgba(255, 255, 255, 0.05);
  --alert-soft-border: rgba(255, 255, 255, 0.12);

  --border: rgba(255, 255, 255, 0.08);
  --input: #27272a;
  --ring: #a3a3a3;
  --ring-offset: #0f0f0f;

  --chart-1: #e8e8e8;
  --chart-2: #a3a3a3;
  --chart-3: #71717a;

  --sidebar: #18181b;
  --sidebar-foreground: #e8e8e8;
  --sidebar-primary: #e8e8e8;
  --sidebar-primary-foreground: #0f0f0f;
  --sidebar-accent: #27272a;
  --sidebar-accent-foreground: #e8e8e8;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #a3a3a3;

  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.4);
  --modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --btn-shadow-hover: 0 2px 8px rgba(255, 255, 255, 0.1);
  --btn-shadow-active: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  --alert-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);

  --dashboard-canvas: #0f0f0f;
  --dashboard-panel: #18181b;
  --dashboard-card-elevated: 0 4px 16px rgba(0, 0, 0, 0.35);
  --dashboard-card-elevated-hover: 0 8px 32px rgba(0, 0, 0, 0.4);


  --avatar-placeholder-gradient: linear-gradient(135deg, #18181b 0%, #09090b 100%);
  --avatar-placeholder-foreground: #fafafa;


  --surface-0: #0f0f0f;
  --surface-1: #18181b;
  --surface-2: #1e1e22;
  --surface-3: #27272a;
  --glass-bg: rgba(24, 24, 27, 0.55);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 20px;
  --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --card-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --dashboard-gradient-mesh:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(255, 255, 255, 0.015) 0%, transparent 50%);
  --sidebar-active-indicator: var(--primary);
  --stat-glow: rgba(255, 255, 255, 0.05);


  --selection-bg: #ffffff;
  --selection-fg: #0f0f0f;
}