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

:root {
  --font-size: 16px;
  --app-font-size: 14.5px;
  --app-h1-size: 28px;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: #ffffff;
  --foreground: #2f2d2a;
  /* Email canvas: emails always render on a white sheet with charcoal ink in every
     client, so these stay constant (NOT theme-flipped) — used by email previews. */
  --email-canvas: #ffffff;
  --email-ink: #2f2d2a;
  --card: #ffffff;
  --card-foreground: #2f2d2a;
  --popover: #ffffff;
  --popup-surface: #ffffff;
  --popover-foreground: #2f2d2a;
  --primary: #2f2d2a;
  --primary-foreground: #ffffff;
  --secondary: #f7f6f4;
  --secondary-foreground: #2f2d2a;
  --muted: #f7f6f4;
  --muted-foreground: #6f6a64;
  --accent: #f7f6f4;
  --accent-foreground: #2f2d2a;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --destructive-soft: rgba(220, 38, 38, 0.1);
  --success: #047857;
  --success-foreground: #ffffff;
  --success-soft: rgba(4, 120, 87, 0.1);
  --warning: #b45309;
  --warning-foreground: #ffffff;
  --warning-soft: rgba(180, 83, 9, 0.12);
  --info: #0369a1;
  --info-foreground: #ffffff;
  --info-soft: rgba(3, 105, 161, 0.1);
  --overlay: rgba(15, 23, 42, 0.48);
  --kbd-background: #ffffff;
  --kbd-foreground: #111827;
  --border: #e7e2dc;
  --input: transparent;
  --input-background: #f7f6f4;
  --switch-background: #d9d2ca;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #2f2d2a;
  --theme-accent: #2f2d2a;
  --theme-accent-hover: #171512;
  --theme-accent-soft: rgba(47, 45, 42, 0.08);
  --theme-accent-soft-strong: rgba(47, 45, 42, 0.14);
  --theme-accent-border: rgba(47, 45, 42, 0.35);
  --theme-accent-muted-border: rgba(47, 45, 42, 0.22);
  --ai-gradient-start: #2f2d2a;
  --ai-gradient-start-hover: #4f4842;
  --ai-gradient-end: #6f6a64;
  --ai-gradient-end-hover: #81766d;
  --ai-contrast: #2f2d2a;
  --ai-soft: rgba(47, 45, 42, 0.12);
  --ai-soft-strong: rgba(47, 45, 42, 0.18);
  --ai-border: rgba(47, 45, 42, 0.28);
  --chart-1: #284b63;
  --chart-2: #62929e;
  --chart-3: #9e6924;
  --chart-4: #5e6c5b;
  --chart-5: #a6445d;
  --control-height: 2.15rem;
  --control-height-compact: 1.9rem;
  --control-radius: 0.45rem;
  --control-padding-x: 0.58rem;
  --radius: 0.5rem;
  --sidebar: #fbfaf8;
  --sidebar-foreground: #2f2d2a;
  --sidebar-primary: #2f2d2a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e7e2dc;
  --sidebar-accent-foreground: #2f2d2a;
  --sidebar-border: #e7e2dc;
  --sidebar-ring: #2f2d2a;

  /* Kairos One brand lockup: navy "ink" + blue accent (brand kit colorway).
     Tokenized (not hardcoded in the SVG) so the navy can flip to a light tint on
     dark surfaces — see .dark and the login brand-panel override in landing.css. */
  --brand-ink: #15406b;
  --brand-accent: #2e86d6;
}

.dark {
  --background: var(--p-surface-950);
  --foreground: var(--p-surface-0);
  /* Lift the navy ink to a light tint so the mark/wordmark stay legible on dark
     surfaces (the blue accent reads fine against dark as-is). */
  --brand-ink: #e8f1fb;
  --card: var(--p-surface-900);
  --card-foreground: var(--p-surface-0);
  --popover: var(--p-surface-900);
  --popup-surface: var(--p-surface-900);
  --popover-foreground: var(--p-surface-0);
  --primary: var(--p-primary-400);
  --primary-foreground: var(--p-surface-900);
  --secondary: var(--p-surface-800);
  --secondary-foreground: var(--p-surface-0);
  --muted: var(--p-surface-800);
  --muted-foreground: var(--p-surface-300);
  --accent: var(--p-surface-800);
  --accent-foreground: var(--p-surface-0);
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --destructive-soft: rgba(248, 113, 113, 0.14);
  --success: #86efac;
  --success-foreground: #052e16;
  --success-soft: rgba(134, 239, 172, 0.14);
  --warning: #fcd34d;
  --warning-foreground: #422006;
  --warning-soft: rgba(252, 211, 77, 0.15);
  --info: #7dd3fc;
  --info-foreground: #082f49;
  --info-soft: rgba(125, 211, 252, 0.14);
  --overlay: rgba(0, 0, 0, 0.68);
  --kbd-background: #f8fafc;
  --kbd-foreground: #0f172a;
  --border: var(--p-surface-700);
  --input: rgba(255, 255, 255, 0.08);
  --ring: var(--p-primary-400);
  --theme-accent: #304c67;
  --theme-accent-hover: #18344f;
  --theme-accent-soft: rgba(48, 76, 103, 0.12);
  --theme-accent-soft-strong: rgba(48, 76, 103, 0.18);
  --theme-accent-border: rgba(48, 76, 103, 0.4);
  --theme-accent-muted-border: rgba(48, 76, 103, 0.28);
  --ai-gradient-start: #343a40;
  --ai-gradient-start-hover: #4a535c;
  --ai-gradient-end: #304c67;
  --ai-gradient-end-hover: #4f7290;
  --ai-contrast: #8fb3d1;
  --ai-soft: rgba(143, 179, 209, 0.14);
  --ai-soft-strong: rgba(143, 179, 209, 0.2);
  --ai-border: rgba(143, 179, 209, 0.34);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: #bdd5ea;
  --chart-2: #84a98c;
  --chart-3: #d8b26f;
  --chart-4: #62929e;
  --chart-5: #fe5f55;
  --sidebar: var(--p-surface-900);
  --sidebar-foreground: var(--p-surface-0);
  --sidebar-primary: var(--p-primary-400);
  --sidebar-primary-foreground: var(--p-surface-900);
  --sidebar-accent: var(--p-surface-800);
  --sidebar-accent-foreground: var(--p-surface-0);
  --sidebar-border: var(--p-surface-700);
  --sidebar-ring: var(--p-primary-400);
}

:root[data-text-scale="compact"] {
  --app-font-size: 14.5px;
  --app-h1-size: 28px;
}

:root[data-text-scale="standard"] {
  --app-font-size: 15.5px;
  --app-h1-size: 30px;
}

:root[data-text-scale="large"] {
  --app-font-size: 16.5px;
  --app-h1-size: 32px;
}

/* Comfortable spacing mode */
.spacing-comfortable {
  --spacing-multiplier: 1.3;
}

.spacing-comfortable * {
  letter-spacing: 0;
}

.ai-disabled .ai-only {
  display: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

@theme inline {
  --font-sans: var(--font-body);
  --font-serif: var(--font-heading);
  --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-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --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);
}

@layer base {
  * {
    border-color: var(--border);
    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
  }

  /**
  * Default typography styles for HTML elements (h1-h4, p, label, button, input).
  * These are in @layer base, so Tailwind utility classes (like text-sm, text-lg) automatically override them.
  */

  html {
    font-size: var(--font-size);
  }

  html,
  body,
  #app {
    min-height: 100%;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--app-font-size);
    text-rendering: optimizeLegibility;
  }

  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h4 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  label {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: inherit;
  }

  input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }

  button,
  input,
  select,
  textarea,
  .p-component {
    font-family: var(--font-body);
    font-size: var(--text-sm);
  }

  .kairos-app,
  .prod-app-root {
    --text-xs: 0.72rem;
    --text-sm: 0.875rem;
    --text-base: 0.95rem;
    --text-lg: 1.08rem;
    --text-xl: 1.2rem;
    --text-2xl: 1.45rem;
    font-family: var(--font-body);
    font-size: var(--app-font-size);
  }

  :root[data-text-scale="standard"] .kairos-app,
  :root[data-text-scale="standard"] .prod-app-root {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
  }

  :root[data-text-scale="large"] .kairos-app,
  :root[data-text-scale="large"] .prod-app-root {
    --text-xs: 0.82rem;
    --text-sm: 0.98rem;
    --text-base: 1.08rem;
    --text-lg: 1.22rem;
    --text-xl: 1.38rem;
    --text-2xl: 1.68rem;
  }

  .kairos-app h1,
  .prod-app-root h1 {
    font-family: var(--font-heading);
    font-size: var(--app-h1-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    line-height: 1.22;
  }

  .kairos-app h2,
  .kairos-app h3,
  .kairos-app h4,
  .prod-app-root h2,
  .prod-app-root h3,
  .prod-app-root h4 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
  }

  .kairos-app button,
  .kairos-app input,
  .kairos-app select,
  .kairos-app textarea,
  .prod-app-root button,
  .prod-app-root input,
  .prod-app-root select,
  .prod-app-root textarea {
    font-family: inherit;
  }

  .kairos-app .p-8 {
    min-height: 100%;
    background: var(--background);
    color: var(--foreground);
  }

  .kairos-app .p-8 > h1:first-child {
    margin-bottom: 1rem;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: var(--app-h1-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    line-height: 1.22;
  }

  :root[data-font-theme="serif-h1"] .kairos-app .p-8 > h1:first-child {
    font-family: var(--font-heading);
  }

  .kairos-app .p-8 > p.text-muted-foreground {
    max-width: 36rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
    padding: 1rem 1.125rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .app-page {
    min-height: 100%;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--app-font-size);
    padding: 2rem;
  }

  .app-page-narrow {
    max-width: 72rem;
    margin-inline: auto;
  }

  .app-kicker {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .app-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 10px 28px rgba(47, 45, 42, 0.06);
  }

  .app-soft-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
  }

  .app-button,
  .app-button-secondary,
  .app-button-ghost,
  .app-button-danger,
  .app-icon-button,
  .app-chip {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    background: var(--card);
    color: var(--foreground);
    padding: 0 var(--control-padding-x);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
  }

  .app-button,
  .app-button-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .app-button:hover,
  .app-button-primary:hover {
    background: var(--theme-accent-hover, var(--primary));
  }

  .app-button-secondary:hover,
  .app-icon-button:hover,
  .app-chip:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
    color: var(--foreground);
  }

  .app-button-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--foreground);
  }

  .app-button-ghost:hover {
    background: var(--muted);
  }

  .app-button-danger {
    border-color: color-mix(in srgb, var(--destructive) 42%, var(--border));
    background: var(--destructive-soft);
    color: var(--destructive);
  }

  .app-button-danger:hover {
    border-color: var(--destructive);
    background: color-mix(in srgb, var(--destructive) 18%, var(--card));
  }

  .app-icon-button {
    width: var(--control-height);
    padding: 0;
  }

  .app-chip.active,
  .app-chip[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    color: var(--primary);
  }

  .app-kbd,
  kbd {
    display: inline-flex;
    min-width: 1.45rem;
    min-height: 1.35rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--muted-foreground) 34%, transparent);
    border-radius: calc(var(--radius) - 0.125rem);
    background: var(--kbd-background);
    color: var(--kbd-foreground);
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1;
  }

  .kairos-app .app-header-dropdown,
  .kairos-app .p-popover,
  .kairos-app .p-overlay,
  .kairos-app .p-menu,
  .kairos-app .p-select-overlay,
  .kairos-app .p-multiselect-overlay,
  .kairos-app .p-autocomplete-overlay,
  .kairos-app .p-cascadeselect-overlay,
  .kairos-app .p-treeselect-overlay,
  .kairos-app .p-datepicker,
  .kairos-app .p-dialog,
  .kairos-app .p-drawer,
  .app-header-dropdown,
  .p-popover,
  .p-overlay,
  .p-menu,
  .p-select-overlay,
  .p-multiselect-overlay,
  .p-autocomplete-overlay,
  .p-cascadeselect-overlay,
  .p-treeselect-overlay,
  .p-datepicker,
  .p-dialog,
  .p-drawer {
    border: 1px solid var(--border);
    background: var(--popup-surface, var(--popover)) !important;
    background-color: var(--popup-surface, var(--popover)) !important;
    background-image: none !important;
    color: var(--popover-foreground);
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  }

  .kairos-app .p-dialog-content,
  .kairos-app .p-dialog-header,
  .kairos-app .p-popover-content,
  .kairos-app .p-menu-list,
  .p-dialog-content,
  .p-dialog-header,
  .p-popover-content,
  .p-menu-list,
  .p-select-list,
  .p-multiselect-list,
  .p-autocomplete-list,
  .p-datepicker-panel {
    background: var(--popup-surface, var(--popover)) !important;
    background-color: var(--popup-surface, var(--popover)) !important;
    color: var(--popover-foreground);
    opacity: 1 !important;
  }

  .kairos-app .rounded-xl,
  .kairos-app .rounded-2xl {
    border-radius: var(--radius);
  }

  /* Modern Scrollbar Styles */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  .dark * {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  /* Webkit browsers (Chrome, Safari, Edge) */
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .dark *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    background-clip: content-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
    background-clip: content-box;
  }

  .dark *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
    background-clip: content-box;
  }

  /* Hide scrollbar when not hovering */
  *::-webkit-scrollbar {
    opacity: 0;
    transition: opacity 0.3s;
  }

  *:hover::-webkit-scrollbar {
    opacity: 1;
  }
}