/*
 * ===================================================================
 * Consolidated Theme CSS
 * Contains only the CSS variables and global styles actually used
 * in the Vue.js application
 * ===================================================================
 */

/* ===================================================================
 * CSS Custom Properties (Variables)
 * ===================================================================*/

:root {
  --always-white: 0 0% 100%;
  --always-black: 0 0% 0%;
}

/* Light mode (not used, but kept for completeness) */
[data-theme="claude"],
[data-theme="claude"][data-mode="light"] {
  --accent-brand: 15 63.1% 59.6%;
  --accent-main-000: 15 54.2% 51.2%;
  --accent-main-100: 15 54.2% 51.2%;
  --accent-main-200: 15 63.1% 59.6%;
  --accent-pro-100: 251 40% 45.1%;
  --accent-secondary-000: 210 73.7% 40.2%;
  --accent-secondary-100: 210 70.9% 51.6%;
  --bg-000: 0 0% 100%;
  --bg-100: 48 33.3% 97.1%;
  --bg-200: 53 28.6% 94.5%;
  --bg-300: 48 25% 92.2%;
  --bg-400: 50 20.7% 88.6%;
  --border-300: 30 3.3% 11.8%;
  --danger-000: 0 58.6% 34.1%;
  --danger-100: 0 56.2% 45.4%;
  --danger-900: 0 50% 95%;
  --oncolor-100: 0 0% 100%;
  --text-000: 60 2.6% 7.6%;
  --text-100: 60 2.6% 7.6%;
  --text-200: 60 2.5% 23.3%;
  --text-300: 60 2.5% 23.3%;
  --text-400: 51 3.1% 43.7%;
}

/* Dark mode (primary theme) */
[data-theme="claude"][data-mode="dark"] {
  --accent-brand: 210 63.1% 59.6%;
  --accent-main-000: 271 54.2% 51.2%;
  --accent-main-100: 227 63.1% 59.6%;
  --accent-main-200: 273 63.1% 59.6%;
  --accent-pro-100: 251 40.2% 54.1%;
  --accent-secondary-000: 210 65.5% 67.1%;
  --accent-secondary-100: 210 70.9% 51.6%;
  --bg-000:  210 27.62% 18.24%;
  --bg-100: 210 47.62% 8.24%;
  --bg-200: 210 57.3% 11.8%;
  --bg-300: 210 77.6% 5.6%;
  --bg-400: 0 0% 0%;
  --border-100: 51 16.5% 84.5%;
  --border-200: 51 16.5% 84.5%;
  --border-300: 51 16.5% 84.5%;
  --border-400: 51 16.5% 84.5%;
  --danger-000: 0 98.4% 75.1%;
  --danger-100: 0 67% 59.6%;
  --danger-900: 0 46.5% 27.8%;
  --oncolor-100: 0 0% 100%;
  --text-000: 48 33.3% 97.1%;
  --text-100: 48 33.3% 97.1%;
  --text-200: 50 9% 73.7%;
  --text-300: 50 9% 73.7%;
  --text-400: 48 4.8% 59.2%;
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  [data-theme="claude"] {
    --accent-brand: 15 63.1% 59.6%;
    --accent-main-000: 15 54.2% 51.2%;
    --accent-main-100: 211 63.1% 59.6%;
    --accent-main-200: 15 63.1% 59.6%;
    --accent-pro-100: 251 40.2% 54.1%;
    --accent-secondary-000: 210 65.5% 67.1%;
    --accent-secondary-100: 210 70.9% 51.6%;
    --bg-000: 60 2.1% 18.4%;
    --bg-100: 60 2.7% 14.5%;
    --bg-200: 30 3.3% 11.8%;
    --bg-300: 60 2.6% 7.6%;
    --bg-400: 0 0% 0%;
    --border-100: 51 16.5% 84.5%;
    --border-200: 51 16.5% 84.5%;
    --border-300: 51 16.5% 84.5%;
    --border-400: 51 16.5% 84.5%;
    --danger-000: 0 98.4% 75.1%;
    --danger-100: 0 67% 59.6%;
    --danger-900: 0 46.5% 27.8%;
    --oncolor-100: 0 0% 100%;
    --text-000: 48 33.3% 97.1%;
    --text-100: 48 33.3% 97.1%;
    --text-200: 50 9% 73.7%;
    --text-300: 50 9% 73.7%;
    --text-400: 48 4.8% 59.2%;
  }
}

/* ===================================================================
 * Global Base Styles & CSS Reset
 * ===================================================================*/

/* Box model reset */
*,
*::after,
*::before {
  box-sizing: border-box;
  border: 0 solid;
  border-color: hsl(var(--border-300));
}

*::after,
*::before {
  --tw-content: "";
}

/* HTML & Body base */
:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
  background-color: hsl(var(--bg-100));
  color: hsl(var(--text-000));
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force dark mode */
:root {
  color-scheme: dark;
}

[data-mode="dark"] {
  color-scheme: dark;
}

/* Headings reset */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Text elements */
p, blockquote, dl, dd, figure, pre {
  margin: 0;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

/* Code and monospace */
code, kbd, pre, samp {
  font-family: var(--font-mono, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

/* Lists */
ul, ol, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Forms */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: hsl(var(--text-400));
}

/* Tables */
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

/* Media */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

svg {
  display: block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Horizontal rule */
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* Hidden */
[hidden] {
  display: none;
}

/* ===================================================================
 * Focus Styles (Accessibility)
 * ===================================================================*/

a, button, input, textarea {
  outline: 2px solid hsla(var(--accent-secondary-000) / 0%);
  outline-offset: 2px;
}

a:not([role="menuitem"]):focus-visible,
button:not([role="menuitem"]):focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid hsl(var(--accent-secondary-000) / 70%);
  transition: outline 0.2s ease !important;
}

/* ===================================================================
 * Scrollbar Styling
 * ===================================================================*/

* {
  scrollbar-width: thin;
  scrollbar-color: hsla(var(--border-300) / 35%) transparent;
}

/* ===================================================================
 * Screen Height Utilities
 * ===================================================================*/

.h-screen {
  height: 100vh;
  height: 100dvh;
}

.min-h-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===================================================================
 * App Container
 * ===================================================================*/

#app {
  width: 100%;
  height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: hsl(var(--bg-100));
}