/* Shared editor UI styles for dashboard and frontend preview/dev mode
 * This file contains all the CSS variables, theme definitions, and editor chrome
 * styles needed for a consistent editing experience across dashboard and frontend.
 */

/* Base CSS variables used throughout the editor UI */
/* Dashboard/editor palette anchored around teal accents with neutral white surfaces. */
:root {
  /* Backgrounds - Keep white */
  --background: oklch(1 0 0);
  --foreground: oklch(0.35 0.02 30);           /* Dark brown #4f3d3d */

  /* Cards - white */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.35 0.02 30);

  /* Popovers */
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.35 0.02 30);

  /* Primary - Teal #82b2ad */
  --primary: oklch(0.72 0.06 180);
  --primary-foreground: oklch(1 0 0);

  /* Secondary - Teal #82b2ad (for outline buttons) */
  --secondary: oklch(0.72 0.06 180);
  --secondary-foreground: oklch(0.55 0.06 180);

  /* Muted - very light teal tint for subtle utility surfaces */
  --muted: oklch(0.98 0.01 185);
  --muted-foreground: oklch(0.50 0.02 30);

  /* Surface - subtle teal-tinted panel background */
  --surface: oklch(0.96 0.012 185);
  --surface-foreground: oklch(0.35 0.02 30);

  /* Accent - Light teal tint */
  --accent: oklch(0.96 0.02 180);
  --accent-foreground: oklch(0.35 0.02 30);

  /* Shared chrome surface for dashboard shell UI (header, fixed status bars, side panels) */
  --editor-chrome-surface: oklch(1 0 0);

  /* Form field border tokens */
  --field-background: oklch(0.992 0.008 180);
  --field-border-subtle: oklch(0.90 0.02 180);
  --field-border-strong: oklch(0.72 0.06 180);
  --field-control-radius: 0.6rem;
  --control-font-size: 0.875rem;
  --control-font-weight: 400;
  --control-letter-spacing: 0.01em;

  /* Button tuning shared by dashboard chrome and frontend preview chrome */
  --button-radius: var(--radius-md);
  --button-padding-x: 1rem;
  --button-padding-y: 0.5rem;
  --button-padding-x-sm: 0.75rem;
  --button-padding-y-sm: 0.375rem;
  --button-padding-x-lg: 2rem;
  --button-padding-y-lg: 0.625rem;
  --button-outline-border-width: 1px;
  --button-outline-hover: oklch(0.92 0.03 180);
  --table-row-hover-background: oklch(0.94 0.018 185);

  /* Destructive - Terracotta red #a34d3d */
  --destructive: oklch(0.55 0.14 25);
  --destructive-foreground: oklch(1 0 0);
  --destructive-hover: oklch(0.48 0.14 25);

  /* Success - Forest green #669470 */
  --success: oklch(0.60 0.10 145);
  --success-foreground: oklch(1 0 0);

  /* Warning - Warm amber */
  --warning: oklch(0.78 0.12 75);
  --warning-foreground: oklch(0.35 0.08 55);

  /* Stronger filled-button hover state */
  --primary-hover: oklch(0.64 0.06 180);

  /* Borders & Inputs */
  --border: oklch(0.90 0.015 185);             /* Subtle cool/teal border */
  --input: var(--field-border-subtle);         /* Subtle teal field borders */
  --ring: var(--field-border-strong);          /* Strong teal focus rings */

  /* Chart colors - updated to palette */
  --chart-1: oklch(0.60 0.10 145);             /* Forest green */
  --chart-2: oklch(0.72 0.06 180);             /* Teal */
  --chart-3: oklch(0.72 0.06 180);             /* Teal */
  --chart-4: oklch(0.50 0.08 30);              /* Terracotta */
  --chart-5: oklch(0.35 0.02 30);              /* Dark brown */

  /* Sidebar - Keep neutral white */
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.35 0.02 30);
  --sidebar-primary: oklch(0.72 0.06 180);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.96 0.02 180);
  --sidebar-accent-foreground: oklch(0.35 0.02 30);
  --sidebar-border: oklch(0.90 0.015 185);     /* Match --border */
  --sidebar-ring: oklch(0.72 0.06 180);
  --dropdown-link-hover-background: var(--sidebar-accent);
  --dropdown-link-hover-foreground: var(--sidebar-accent-foreground);

  --font-sans: Plus Jakarta Sans, sans-serif;
  --font-serif: Lora, serif;
  --font-mono: IBM Plex Mono, monospace;
  --radius: 1.4rem;
  --interactive-glow-color: rgba(130, 178, 173, 0.45);
  --card-glow-shape: 0px 0px 20px;
  --interactive-glow-shadow: var(--card-glow-shape) var(--interactive-glow-color);
  --card-glow-shadow: var(--interactive-glow-shadow);
  --tab-active-glow-shadow: var(--interactive-glow-shadow);
  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
  --tracking-normal: 0;
  --spacing: 0.27rem;
}

/* Dark mode overrides - Earthy palette adjusted for dark backgrounds */
.dark {
  --background: oklch(0.20 0.02 30);           /* Very dark brown */
  --foreground: oklch(0.92 0.02 55);           /* Light cream */

  --card: oklch(0.25 0.02 30);
  --card-foreground: oklch(0.92 0.02 55);

  --popover: oklch(0.25 0.02 30);
  --popover-foreground: oklch(0.92 0.02 55);

  /* Primary - Brighter teal for dark mode */
  --primary: oklch(0.78 0.06 180);
  --primary-foreground: oklch(0.20 0.02 30);

  /* Secondary - Brighter teal for dark mode */
  --secondary: oklch(0.78 0.06 180);
  --secondary-foreground: oklch(0.88 0.04 180);

  --muted: oklch(0.30 0.02 185);
  --muted-foreground: oklch(0.70 0.02 55);

  /* Surface - Dark mode */
  --surface: oklch(0.26 0.02 185);
  --surface-foreground: oklch(0.92 0.02 55);

  --accent: oklch(0.30 0.03 180);
  --accent-foreground: oklch(0.92 0.02 55);

  --editor-chrome-surface: oklch(0.25 0.02 30);

  --field-background: oklch(0.28 0.02 180);
  --field-border-subtle: oklch(0.52 0.03 180);
  --field-border-strong: oklch(0.78 0.06 180);
  --field-control-radius: 0.6rem;
  --control-font-size: 0.875rem;
  --control-font-weight: 400;
  --control-letter-spacing: 0.01em;

  --button-radius: var(--radius-md);
  --button-padding-x: 1rem;
  --button-padding-y: 0.5rem;
  --button-padding-x-sm: 0.75rem;
  --button-padding-y-sm: 0.375rem;
  --button-padding-x-lg: 2rem;
  --button-padding-y-lg: 0.625rem;
  --button-outline-border-width: 1px;
  --button-outline-hover: oklch(0.36 0.04 180);
  --table-row-hover-background: oklch(0.34 0.03 185);

  --destructive: oklch(0.60 0.14 25);
  --destructive-foreground: oklch(1 0 0);
  --destructive-hover: oklch(0.66 0.14 25);

  --success: oklch(0.65 0.10 145);
  --success-foreground: oklch(1 0 0);

  /* Warning - Dark mode amber */
  --warning: oklch(0.72 0.12 75);
  --warning-foreground: oklch(0.92 0.02 55);
  --primary-hover: oklch(0.70 0.06 180);

  --border: oklch(0.38 0.02 185);              /* Dark subtle teal border */
  --input: var(--field-border-subtle);
  --ring: var(--field-border-strong);

  /* Chart colors - adjusted for dark mode */
  --chart-1: oklch(0.70 0.10 145);
  --chart-2: oklch(0.78 0.06 180);
  --chart-3: oklch(0.78 0.06 180);
  --chart-4: oklch(0.60 0.08 30);
  --chart-5: oklch(0.70 0.02 30);

  --sidebar: oklch(0.18 0.02 30);
  --sidebar-foreground: oklch(0.92 0.02 55);
  --sidebar-primary: oklch(0.78 0.06 180);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.30 0.03 180);
  --sidebar-accent-foreground: oklch(0.78 0.06 180);
  --sidebar-border: oklch(0.38 0.02 185);      /* Match --border */
  --sidebar-ring: oklch(0.65 0.06 180);
  --dropdown-link-hover-background: var(--sidebar-accent);
  --dropdown-link-hover-foreground: var(--sidebar-accent-foreground);

  --font-sans: Plus Jakarta Sans, sans-serif;
  --font-serif: Lora, serif;
  --font-mono: IBM Plex Mono, monospace;
  --radius: 1.4rem;
  --interactive-glow-color: rgba(130, 178, 173, 0.35);
  --card-glow-shape: 0px 0px 18px;
  --interactive-glow-shadow: var(--card-glow-shape) var(--interactive-glow-color);
  --card-glow-shadow: var(--interactive-glow-shadow);
  --tab-active-glow-shadow: var(--interactive-glow-shadow);
  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
}

/* Map CSS variables to Tailwind theme tokens */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-surface: var(--surface);
  --color-surface-foreground: var(--surface-foreground);
  --color-editor-chrome-surface: var(--editor-chrome-surface);
  --color-field-background: var(--field-background);
  --color-field-border: var(--field-border-subtle);
  --color-field-border-focus: var(--field-border-strong);
  --color-primary-hover: var(--primary-hover);
  --color-destructive-hover: var(--destructive-hover);
  --color-button-outline-hover: var(--button-outline-hover);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
}

/* Editor chrome theme class - applied to portal root for editor UI */
.builder-dashboard-chrome-theme {
  /* Core roles for editor UI components */
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.35 0.02 30);     /* Dark brown */
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.35 0.02 30);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.35 0.02 30);
  --color-border: oklch(0.90 0.015 185);       /* Match --border */
  --color-input: var(--field-border-subtle);
  --color-ring: var(--field-border-strong);

  /* Radius tokens used by UI components */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* Editor block highlighting */
[data-editor-block-highlight="true"] {
  outline: 2px solid rgba(59, 130, 246, 0.6);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  transition: outline-offset 0.2s ease, box-shadow 0.2s ease;
}

/* Editor field highlighting */
[data-editor-field-highlight="true"] {
  outline: 2px solid rgba(59, 130, 246, 0.6);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  border-radius: 0.5rem;
  transition: outline-offset 0.2s ease, box-shadow 0.2s ease;
}

@layer base {
  /* NOTE: Keep editor chrome styles scoped so SDK preview mode doesn't affect site styling. */
  .builder-dashboard-chrome-theme,
  .builder-dashboard-chrome-theme * {
    @apply border-border;
  }

  .builder-dashboard-chrome-theme {
    @apply bg-background text-foreground;
    letter-spacing: var(--tracking-normal);
  }

  .builder-dashboard-chrome-theme h1 {
    @apply text-3xl font-semibold;
    letter-spacing: var(--heading-letter-spacing);
  }

  .builder-dashboard-chrome-theme h2 {
    @apply text-2xl font-semibold;
    letter-spacing: var(--heading-letter-spacing);
  }

  .builder-dashboard-chrome-theme h3 {
    @apply text-xl font-semibold;
    letter-spacing: var(--heading-letter-spacing);
  }

  .builder-dashboard-chrome-theme h4 {
    @apply text-lg font-semibold;
    letter-spacing: var(--heading-letter-spacing);
  }

  .builder-dashboard-chrome-theme h5 {
    @apply text-base font-semibold;
  }

  .builder-dashboard-chrome-theme h6 {
    @apply text-sm font-semibold;
  }
}

/* Collapsible animations for editor UI */
@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

@layer utilities {
  .animate-collapsible-down {
    animation: collapsible-down 0.25s ease-out both;
  }

  .animate-collapsible-up {
    animation: collapsible-up 0.25s ease-out both;
  }
}

@layer components {
  /* Interactive card item - clickable tiles with subtle border on hover */
  .interactive-card-item {
    @apply rounded-md border-[3px] border-transparent bg-background p-3 transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
  }
}
