/* ==========================================
   Design Tokens
   ========================================== */

/* Font Face Declarations - Using Thicket Design System Fonts from CDN */
/* Local fonts removed - using Thicket CDN fonts instead */

:root {
  /* Colors */
  --color-background-primary: var(--thicket-bauhaus-color-green-950);
  --color-background-secondary: var(--thicket-bauhaus-color-orange-400);
  --color-background-overlay: rgba(0, 0, 0, 0.5);
  --color-background-cta: var(--thicket-bauhaus-color-orange-200);

  --color-text-primary: var(--thicket-bauhaus-color-green-50);
  --color-text-secondary: var(--thicket-bauhaus-color-green-100);
  --color-text-secondary-quiet: var(--thicket-bauhaus-color-green-50);
  --color-text-accent: var(--thicket-bauhaus-color-orange-200);

  --color-border-primary: var(--thicket-bauhaus-color-green-50);
  --color-border-secondary: var(--thicket-bauhaus-color-orange-200);

  --color-accent: var(--thicket-bauhaus-color-orange-200);
  --color-label-background: var(--thicket-bauhaus-color-green-50);
  --color-label-text: var(--thicket-bauhaus-color-green-900);

  /* Typography - Using Local Fonts */
  --font-family-display: "Gabarito", "Helvetica Neue", Arial, sans-serif;
  --font-family-primary: "Sophia Pro", "Helvetica Neue", Arial, sans-serif;

  --font-weight-regular: var(--thicket-bauhaus-text-weights-regular);
  --font-weight-medium: var(--thicket-bauhaus-text-weights-regular);
  --font-weight-bold: var(--thicket-bauhaus-text-weights-bold);

  --font-size-xs: var(--thicket-bauhaus-text-sizes-xs);
  --font-size-sm: var(--thicket-bauhaus-text-sizes-sm);
  --font-size-base: var(--thicket-bauhaus-text-sizes-base);
  --font-size-md: var(--thicket-bauhaus-text-sizes-lg);
  --font-size-lg: var(--thicket-bauhaus-text-sizes-xl);
  --font-size-xl: var(--thicket-bauhaus-text-sizes-2xl);
  --font-size-xxl: var(--thicket-bauhaus-text-sizes-3xl);
  --font-size-huge: var(--thicket-bauhaus-text-sizes-4xl);
  --font-size-32px: 32px;

  --line-height-tight: var(--thicket-bauhaus-text-line-heights-normal);
  --line-height-base: var(--thicket-bauhaus-text-line-heights-normal);
  --line-height-relaxed: var(--thicket-bauhaus-text-line-heights-large);

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

  /* Layout */
  --container-padding: var(--spacing-lg);
  --intro-width: 30%;
  --content-width: 70%;
  --navbar-height: 60px;

  /* Cards & Containers */
  --card-width-regular: 350px;
  --card-width-large: 400px;
  --card-min-width: 300px;
  --grid-gap: 20px;
  --grid-columns: 2;

  /* Borders */
  --radius: 0.625rem;
  --border-radius-sm: 0px;
  --border-radius: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 32px;
  --border-width: 1px;

  /* Effects */
  --transition-speed-fast: 0.2s;
  --transition-speed-medium: 0.3s;
  --transition-speed-slow: 0.5s;
  --filter-image: grayscale(0.4) contrast(1.1);
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

  /* Shadows - from shadcn theme */
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
    0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
    0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
    0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
    0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* Theme colors - from shadcn */
  --card: 0 0% 100%;
  --card-foreground: 240 5.9% 10%;
  --border: 240 5.9% 90%;
}

/* ==========================================
   Theme Variants
   ========================================== */

/* Light Theme */
body.light-theme {
  --color-background-primary: #f0f0f1;
  --color-background-secondary: var(--thicket-bauhaus-color-zinc-50);
  --color-background-overlay: rgba(255, 255, 255, 0.5);
  --color-background-button: rgba(0, 0, 0, 0.1);
  --color-background-cta: var(--thicket-bauhaus-color-zinc-900);

  --color-text-primary: var(--thicket-bauhaus-color-zinc-900);
  --color-text-secondary: var(--thicket-bauhaus-color-zinc-800);
  --color-text-secondary-quiet: var(--thicket-bauhaus-color-zinc-700);
  --color-text-accent: var(--thicket-bauhaus-color-zinc-900);

  --color-border-primary: var(--thicket-bauhaus-color-zinc-900);
  --color-border-secondary: var(--thicket-bauhaus-color-zinc-200);

  --color-accent: var(--thicket-bauhaus-color-zinc-900);
  --color-label-background: var(--thicket-bauhaus-color-zinc-900);
  --color-label-text: var(--thicket-bauhaus-color-grey-50);

  /* Override Thicket design system colors for light theme */
  --thicket-bauhaus-color-semantic-background-brand: var(
    --thicket-bauhaus-color-grey-50
  );
  --thicket-bauhaus-color-semantic-background-brand-quiet: var(
    --thicket-bauhaus-color-zinc-100
  );
  --thicket-bauhaus-color-semantic-foreground-on-brand: var(
    --thicket-bauhaus-color-zinc-900
  );
  --thicket-bauhaus-color-semantic-background-accent: var(
    --thicket-bauhaus-color-orange-200
  );
  --thicket-bauhaus-color-semantic-background-accent-quiet: var(
    --thicket-bauhaus-color-orange-300
  );
  --thicket-bauhaus-color-semantic-foreground-on-accent: var(
    --thicket-bauhaus-color-grey-50
  );
}

/* Dark Theme */
body.dark-theme {
  --color-background-primary: var(--thicket-bauhaus-color-green-950);
  --color-background-secondary: var(--thicket-bauhaus-color-green-950);
  --color-background-overlay: rgba(0, 0, 0, 0.8);
  --color-background-button: rgba(255, 255, 255, 0.1);
  --color-background-cta: var(--thicket-bauhaus-color-green-50);

  --color-text-primary: #f5f5f5;
  --color-text-secondary: #cccccc;
  --color-text-secondary-quiet: #999999;
  --color-text-accent: var(--thicket-bauhaus-color-green-50);

  --color-border-primary: #333333;
  --color-border-secondary: var(--thicket-bauhaus-color-green-50);

  --color-accent: var(--thicket-bauhaus-color-green-50);
  --color-label-background: var(--thicket-bauhaus-color-green-50);
  --color-label-text: #0a0a0a;

  /* Override Thicket design system colors for dark theme */
  --thicket-bauhaus-color-semantic-background-brand: #0a0a0a;
  --thicket-bauhaus-color-semantic-background-brand-quiet: #1a1a1a;
  --thicket-bauhaus-color-semantic-foreground-on-brand: #f5f5f5;
  --thicket-bauhaus-color-semantic-background-accent: var(
    --thicket-bauhaus-color-green-50
  );
  --thicket-bauhaus-color-semantic-background-accent-quiet: var(
    --thicket-bauhaus-color-green-100
  );
  --thicket-bauhaus-color-semantic-foreground-on-accent: #0a0a0a;

  /* Dark theme specific adjustments */
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  --filter-image: grayscale(0.2) contrast(1.2) brightness(0.9);
}

/* ==========================================
   Responsive Adjustments
   ========================================== */

/* Large screens - default state */
@media (min-width: 1441px) {
  :root {
    --card-width-regular: 400px;
    --card-width-large: 450px;
    --container-padding: var(--spacing-);
    --font-size-xxl: 3rem;
    --font-size-huge: 6rem;
  }
}

/* Desktop */
@media (max-width: 1440px) {
  :root {
    --card-width-regular: 350px;
    --card-width-large: 400px;
  }
}

/* Small Desktop / Large Tablet */
@media (max-width: 1200px) {
  :root {
    --card-width-regular: 300px;
    --card-width-large: 350px;
    --font-size-lg: 1.3rem;
    --container-padding: var(--spacing-lg);
    --intro-width: 35%;
    --content-width: 65%;
  }
}

/* Tablet */
@media (max-width: 992px) {
  :root {
    --card-width-regular: 45vw;
    --card-width-large: 80vw;
    --grid-gap: 15px;
    --container-padding: var(--spacing-md);
  }
}

/* Small Tablet */
@media (max-width: 768px) {
  :root {
    --grid-columns: 1;
    --card-width-regular: 100%;
    --navbar-height: 120px;
    --font-size-lg: 1.2rem;
    --font-size-xxl: 2.2rem;
    --font-size-huge: 3.5rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  :root {
    --spacing-xl: 2rem;
    --spacing-xxl: 2.5rem;
    --container-padding: var(--spacing-sm);
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 1.8rem;
    --font-size-huge: 3rem;
  }
}