@import 'tailwindcss';
@import 'tw-animate-css';

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

/* iA Writer Variable Fonts */
@font-face {
  font-family: 'iA Writer Duo';
  src: url('./assets/fonts/iA-Writer-Duo/Variable/iAWriterDuoV.ttf')
    format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iA Writer Duo';
  src: url('./assets/fonts/iA-Writer-Duo/Variable/iAWriterDuoV-Italic.ttf')
    format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'iA Writer Mono';
  src: url('./assets/fonts/iA-Writer-Mono/Variable/iAWriterMonoV.ttf')
    format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iA Writer Mono';
  src: url('./assets/fonts/iA-Writer-Mono/Variable/iAWriterMonoV-Italic.ttf')
    format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 10%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 10%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 10%);
  --primary: hsl(0 0% 10%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(0 0% 96%);
  --secondary-foreground: hsl(0 0% 10%);
  --muted: hsl(0 0% 96%);
  --muted-foreground: hsl(0 0% 45%);
  --accent: hsl(0 0% 96%);
  --accent-foreground: hsl(0 0% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(0 0% 90%);
  --input: hsl(0 0% 90%);
  --ring: hsl(0 0% 10%);
  --radius: 0.5rem;
  --sidebar: var(--card);
  --sidebar-foreground: hsl(0 0% 20%);
  --sidebar-primary: hsl(0 0% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(0 0% 96%);
  --sidebar-accent-foreground: hsl(0 0% 10%);
  --sidebar-border: hsl(0 0% 90%);
  --sidebar-ring: hsl(0 0% 40%);

  /* Status colors */
  --color-draft: 37 99% 25%; /* orange-600 equivalent */
  --color-draft-bg: 33 100% 96%; /* orange-50 equivalent */
  --color-required: 0 84% 60%; /* red-500 equivalent */
  --color-warning: 45 93% 47%; /* yellow-500 equivalent */
  --color-warning-bg: 55 92% 95%; /* yellow-50 equivalent */
}

.dark {
  --background: hsl(0 0% 7%);
  --foreground: hsl(0 0% 90%);
  --card: hsl(0 0% 9%);
  --card-foreground: hsl(0 0% 90%);
  --popover: hsl(0 0% 9%);
  --popover-foreground: hsl(0 0% 90%);
  --primary: hsl(0 0% 90%);
  --primary-foreground: hsl(0 0% 10%);
  --secondary: hsl(0 0% 12%);
  --secondary-foreground: hsl(0 0% 90%);
  --muted: hsl(0 0% 12%);
  --muted-foreground: hsl(0 0% 60%);
  --accent: hsl(0 0% 15%);
  --accent-foreground: hsl(0 0% 90%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 95%);
  --border: hsl(0 0% 18%);
  --input: hsl(0 0% 18%);
  --ring: hsl(0 0% 70%);
  --sidebar: hsl(0 0% 8%);
  --sidebar-foreground: hsl(0 0% 90%);
  --sidebar-primary: hsl(0 0% 50%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(0 0% 14%);
  --sidebar-accent-foreground: hsl(0 0% 90%);
  --sidebar-border: hsl(0 0% 18%);
  --sidebar-ring: hsl(0 0% 50%);

  /* Status colors - dark mode */
  --color-draft: 33 100% 70%; /* Lighter orange for dark */
  --color-draft-bg: 33 100% 8%; /* Dark orange background */
  --color-required: 0 91% 71%; /* Lighter red for dark */
  --color-warning: 48 96% 80%; /* Lighter yellow for dark */
  --color-warning-bg: 48 100% 6%; /* Dark yellow background */
}

@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-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius: 0.5rem;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-draft: hsl(var(--color-draft));
  --color-draft-bg: hsl(var(--color-draft-bg));
  --color-required: hsl(var(--color-required));
  --color-warning: hsl(var(--color-warning));
  --color-warning-bg: hsl(var(--color-warning-bg));
}

@layer base {
  * {
    @apply border-border;
  }

  svg {
    color: inherit;
  }

  ::placeholder {
    color: hsl(var(--muted-foreground));
    opacity: 1;
  }

  ::-webkit-input-placeholder {
    color: hsl(var(--muted-foreground));
    opacity: 1;
  }

  ::-moz-placeholder {
    color: hsl(var(--muted-foreground));
    opacity: 1;
  }
}

/* Prevent bounce scroll effect */
html {
  overscroll-behavior: none;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, 'Segoe UI', 'Roboto', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

#root {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  border-radius: 12px;
  background: hsl(var(--background));
  border: 0.5px solid hsl(var(--border));
}

/* macOS Traffic Light Styling */
@layer components {
  /* Container for traffic lights group */
  .traffic-lights-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px;
  }

  .traffic-light {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    transition: background-color 0.12s ease;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
  }

  .traffic-light-close {
    background: #ff5f56;
    border-color: #e0443e;
  }
  .traffic-light-close:hover {
    background: #ff453a;
  }

  .traffic-light-minimize {
    background: #ffbd30;
    border-color: #dea123;
  }
  .traffic-light-minimize:hover {
    background: #ffb524;
  }

  .traffic-light-maximize {
    background: #28ca42;
    border-color: #1aac29;
  }
  .traffic-light-maximize:hover {
    background: #1fb932;
  }

  .traffic-light .symbol {
    opacity: 0;
    transition: opacity 0.12s ease;
    color: rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family:
      system-ui,
      -apple-system;
  }

  /* Show all symbols when hovering over the group */
  .traffic-lights-group:hover .traffic-light .symbol {
    opacity: 1;
  }

  /* Specific symbol adjustments for better positioning */
  .traffic-light-close .symbol {
    font-size: 8px;
    font-weight: 800;
    transform: translate(-50%, -51%);
  }

  .traffic-light-minimize .symbol {
    font-size: 7px;
    font-weight: 900;
    transform: translate(-50%, -49%);
  }

  .traffic-light-maximize .symbol {
    font-size: 6px;
    font-weight: 600;
    transform: translate(-50%, -50%);
  }

  /* Dark mode traffic light adaptations - same colors as light mode */
  .dark .traffic-light-close {
    background: #ff5f56;
    border-color: #e0443e;
  }
  .dark .traffic-light-close:hover {
    background: #ff453a;
  }
  .dark .traffic-light-minimize {
    background: #ffbd30;
    border-color: #dea123;
  }
  .dark .traffic-light-minimize:hover {
    background: #ffb524;
  }
  .dark .traffic-light-maximize {
    background: #28ca42;
    border-color: #1aac29;
  }
  .dark .traffic-light-maximize:hover {
    background: #1fb932;
  }
  .dark .traffic-light .symbol {
    color: rgba(0, 0, 0, 0.75);
  }

  /* Window unfocused state - grey traffic lights */
  .window-unfocused .traffic-light-close,
  .window-unfocused .traffic-light-minimize,
  .window-unfocused .traffic-light-maximize {
    background: #c4c4c4 !important;
    border-color: #a0a0a0 !important;
  }

  .window-unfocused .traffic-light-close:hover,
  .window-unfocused .traffic-light-minimize:hover,
  .window-unfocused .traffic-light-maximize:hover {
    background: #b8b8b8 !important;
  }

  /* Dark mode unfocused state */
  .dark.window-unfocused .traffic-light-close,
  .dark.window-unfocused .traffic-light-minimize,
  .dark.window-unfocused .traffic-light-maximize {
    background: #5a5a5a !important;
    border-color: #4a4a4a !important;
  }

  .dark.window-unfocused .traffic-light-close:hover,
  .dark.window-unfocused .traffic-light-minimize:hover,
  .dark.window-unfocused .traffic-light-maximize:hover {
    background: #6a6a6a !important;
  }
}

/* Allow text selection in specific areas */
input,
textarea,
[contenteditable='true'],
.cm-editor,
.CodeMirror {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text !important;
}

/* Ensure default cursor on all elements */
* {
  cursor: inherit;
}

/* Force default cursor on all text elements except inside CodeMirror editor */
p:not(.editor-view *, .cm-editor *),
span:not(.editor-view *, .cm-editor *),
div:not(.editor-view *, .cm-editor *),
h1:not(.editor-view *, .cm-editor *),
h2:not(.editor-view *, .cm-editor *),
h3:not(.editor-view *, .cm-editor *),
h4:not(.editor-view *, .cm-editor *),
h5:not(.editor-view *, .cm-editor *),
h6:not(.editor-view *, .cm-editor *),
label:not(.editor-view *, .cm-editor *),
li:not(.editor-view *, .cm-editor *),
td:not(.editor-view *, .cm-editor *),
th:not(.editor-view *, .cm-editor *) {
  cursor: default !important;
}

/* CodeMirror isolation - prevent global styles from interfering */
.cm-editor,
.cm-editor *,
.cm-focused {
  isolation: isolate;
  outline: none !important;
}

/* Ensure text cursor in all CodeMirror editor areas */
.editor-view,
.editor-view .cm-editor,
.editor-view .cm-scroller,
.editor-view .cm-content,
.cm-editor .cm-scroller,
.cm-editor .cm-content {
  cursor: text !important;
}

/* Only links should have pointer cursor in native app */
a {
  cursor: pointer !important;
}

/* Utility class for when pointer cursor is explicitly needed */
.cursor-pointer {
  cursor: pointer !important;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
}

/* Focus Mode Toggle Styling */
.focus-mode-active {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
