/* =============================================================================
   Landing Page CSS Variables
   AUTO-GENERATED from server/theme/const.go - DO NOT EDIT DIRECTLY
   Run 'make generate-css' to regenerate
   ============================================================================= */

:root {

  /* Background colors */
  --color-background-100: #fdfdfd;
  --color-background-200: #fafafa;
  --color-background-300: #f7f7f7;
  --color-background-400: #fefefe;
  --color-background-50: #fefefe;
  --color-background-500: #f9f9f9;
  --color-background-600: #ededed;
  --color-background-700: #d9d9d9;
  --color-background-800: #c1c1c1;

  /* Content/text colors */
  --color-content-100: #b2b2b2;
  --color-content-200: #8c8c8c;
  --color-content-300: #666666;
  --color-content-400: #404040;
  --color-content-50: #d8d8d8;
  --color-content-500: #191919;
  --color-content-600: #000000;
  --color-content-700: #000000;
  --color-content-800: #000000;
  --color-content-900: #000000;

  /* Accent content colors */
  --color-accent-content-100: #f5f5f5;
  --color-accent-content-200: #e5e5e5;
  --color-accent-content-300: #d4d4d4;
  --color-accent-content-400: #a3a3a3;
  --color-accent-content-50: #ffffff;
  --color-accent-content-500: #737373;

  /* Primary accent colors */
  --color-accent-100: #6c6c6c;
  --color-accent-200: #5a5a5a;
  --color-accent-300: #484848;
  --color-accent-400: #313131;
  --color-accent-50: #838383;
  --color-accent-500: #1a1a1a;
  --color-accent-600: #171717;
  --color-accent-700: #151515;
  --color-accent-800: #121212;

  /* Border colors */
  --color-border-100: #e5e5e5;
  --color-border-200: #d5d5d5;
  --color-border-300: #c6c6c6;
  --color-border-400: #b6b6b6;
  --color-border-50: #eeeeee;
  --color-border-500: #a6a6a6;

  /* Semantic text colors */
  --color-text-muted: #949494;
  --color-text-primary: #585858;
  --color-text-secondary: #767676;
  --color-text-subtle: #aeaeae;

  /* Success colors */
  --color-success-100: #6fd996;
  --color-success-200: #59d486;
  --color-success-300: #43ce76;
  --color-success-400: #2dc866;
  --color-success-50: #85dfa6;
  --color-success-500: #22c55e;
  --color-success-600: #20bb59;

  /* Warning colors */
  --color-warning-100: #f9c060;
  --color-warning-200: #f8b648;
  --color-warning-300: #f7ad30;
  --color-warning-400: #f6a317;
  --color-warning-50: #faca79;
  --color-warning-500: #f59e0b;
  --color-warning-600: #e9960a;

  /* Error colors */
  --color-error-100: #f58585;
  --color-error-200: #f37373;
  --color-error-300: #f16060;
  --color-error-400: #f04d4d;
  --color-error-50: #f69898;
  --color-error-500: #ef4444;
  --color-error-600: #e34141;

  /* Info colors */
  --color-info-100: #62c5f1;
  --color-info-200: #4abcef;
  --color-info-300: #32b3ec;
  --color-info-400: #1aaaea;
  --color-info-50: #7acef3;
  --color-info-500: #0ea5e9;
  --color-info-600: #0d9ddd;

  /* Hover states */
  --color-hover-accent: #1a1a1a;
  --color-hover-bg: #f9f9f9;

  /* Active states */
  --color-active-accent: #171717;
  --color-active-bg: #ededed;

  /* Focus states */
  --color-focus-ring: #5a5a5a;

  /* Shadow colors */
  --color-shadow-lg: #d8d8d8;
  --color-shadow-md: #e5e5e5;
  --color-shadow-sm: #f1f1f1;
  --color-shadow-xl: #cbcbcb;

  /* Legacy aliases for backward compatibility */
  --secondary-bg: var(--color-content-900);
  --accent-color: var(--color-accent-500);
  --accent-hover-color: var(--color-accent-600);
  --accent-weak: var(--color-accent-200);
  --accent-strong: var(--color-accent-600);
  --on-accent: #ffffff;
  --accent-gradient-from: var(--color-content-400);
  --accent-gradient-to: var(--color-content-500);
  --text-muted: var(--color-content-300);
  --bg-muted: var(--color-background-100);
  --border-muted: var(--color-border-200);
  --border-strong: var(--color-border-300);

  /* Shadows */
  --shadow-soft: 0 20px 60px rgba(15, 23, 42, 0.08);
  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);

  /* Radii - matching app rounded-lg style */
  --radius-sm: 0.375rem;
  --radius-base: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Layout */
  --max-width: 1120px;

  /* Transitions - matching app's smooth feel */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}