@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--on-background);
  --font-sans: var(--font-nunito-sans);
  --font-serif: var(--font-literata);
  --font-mono: var(--font-geist-mono);
  --font-heading: var(--font-literata);
  
  --color-surface: var(--surface);
  --color-surface-dim: var(--surface-dim);
  --color-surface-bright: var(--surface-bright);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container: var(--surface-container);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);
  --color-on-surface: var(--on-surface);
  --color-on-surface-variant: var(--on-surface-variant);
  --color-inverse-surface: var(--inverse-surface);
  --color-inverse-on-surface: var(--inverse-on-surface);
  
  --color-outline: var(--outline);
  --color-outline-variant: var(--outline-variant);
  
  --color-primary: var(--primary);
  --color-on-primary: var(--on-primary);
  --color-primary-container: var(--primary-container);
  --color-on-primary-container: var(--on-primary-container);
  --color-inverse-primary: var(--inverse-primary);
  
  --color-secondary: var(--secondary);
  --color-on-secondary: var(--on-secondary);
  --color-secondary-container: var(--secondary-container);
  --color-on-secondary-container: var(--on-secondary-container);
  
  --color-tertiary: var(--tertiary);
  --color-on-tertiary: var(--on-tertiary);
  --color-tertiary-container: var(--tertiary-container);
  --color-on-tertiary-container: var(--on-tertiary-container);
  
  --color-error: var(--error);
  --color-on-error: var(--on-error);
  --color-error-container: var(--error-container);
  --color-on-error-container: var(--on-error-container);
  
  --color-accent-pink: var(--accent-pink);
  
  /* shadcn mappings */
  --color-border: var(--outline-variant);
  --color-input: var(--outline-variant);
  --color-ring: var(--primary);
  --color-muted: var(--surface-container-highest);
  --color-muted-foreground: var(--on-surface-variant);
  --color-accent: var(--tertiary);
  --color-accent-foreground: var(--on-tertiary);
  --color-card: var(--surface);
  --color-card-foreground: var(--on-surface);
  --color-popover: var(--surface);
  --color-popover-foreground: var(--on-surface);
  --color-destructive: var(--error);
  --color-destructive-foreground: var(--on-error);
  
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  
  --spacing-unit: 8px;
  --spacing-container-max: 1200px;
  --spacing-gutter: 24px;
  --spacing-margin-mobile: 20px;
  --spacing-section-gap: 80px;
}

:root {
  /* Aegean Coastal Sanctuary Palette */
  --surface: #f6fafb;
  --surface-dim: #d7dbdc;
  --surface-bright: #f6fafb;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f4f5;
  --surface-container: #ebeef0;
  --surface-container-high: #e5e9ea;
  --surface-container-highest: #dfe3e4;
  --on-surface: #181c1d;
  --on-surface-variant: #3e494b;
  --inverse-surface: #2d3132;
  --inverse-on-surface: #eef1f2;
  --outline: #6e797c;
  --outline-variant: #bdc8cb;
  --surface-tint: #006877;
  --primary: #006574;
  --on-primary: #ffffff;
  --primary-container: #088092;
  --on-primary-container: #f8fdff;
  --inverse-primary: #78d4e7;
  --secondary: #705a4c;
  --on-secondary: #ffffff;
  --secondary-container: #f8dac8;
  --on-secondary-container: #755e50;
  --tertiary: #8a4c17;
  --on-tertiary: #ffffff;
  --tertiary-container: #a7642e;
  --on-tertiary-container: #fffbff;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --background: #f6fafb;
  --on-background: #181c1d;
  
  --accent-pink: #d46a8c;
  
  /* Fluid Typography from Design System */
  --text-hero: clamp(3rem, 8vw, 8rem);
  --text-h1: 48px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-label-lg: 14px;
}

/* For simplicity, map dark mode to slightly adjusted values if needed, or leave as is if dark mode isn't explicitly defined in design.md */
.dark {
  --background: #181c1d;
  --on-background: #f6fafb;
  --surface: #181c1d;
  --on-surface: #e5e9ea;
  --primary: #78d4e7;
  --on-primary: #00363f;
  --secondary: #dec1af;
  --on-secondary: #3e2d22;
  --tertiary: #ffb782;
  --on-tertiary: #4c2700;
  --outline-variant: #3e494b;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  h1 { font-size: var(--text-h1); line-height: 1.2; font-weight: 600; }
  h2 { font-size: var(--text-h2); line-height: 1.3; font-weight: 600; }
  h3 { font-size: var(--text-h3); line-height: 1.4; font-weight: 500; }
}