@import "tailwindcss";

@theme {
  --container-8xl: 88rem;
}

:root {
  --trend-grid-color: oklch(56% 0.01 255 / 0.28);
  --trend-axis-color: oklch(42% 0.01 255 / 0.85);
  --trend-fill-start-opacity: 0.32;
  --trend-fill-end-opacity: 0.05;
  --trend-tooltip-bg: oklch(99% 0.005 255 / 0.96);
  --trend-tooltip-border: oklch(84% 0.01 255 / 0.7);
  --trend-tooltip-shadow: oklch(0% 0 0 / 0.1);
}

@plugin "daisyui" {
  /* @property isn't supported by some browsers and gives a noisy warning https://github.com/saadeghi/daisyui/issues/3882 */
  exclude: properties;
}

/* Light theme */
@plugin "daisyui/theme" {
  name: "openseo";
  default: true;
  prefersdark: false;
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97% 0 0);
  --color-base-300: oklch(92% 0 0);
  --color-base-content: oklch(20% 0 0);
  --color-primary: oklch(55% 0.18 260);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(55% 0.15 145);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(55% 0.18 260);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(25% 0 0);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(70% 0.15 230);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(65% 0.18 145);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(80% 0.15 80);
  --color-warning-content: oklch(100% 0 0);
  --color-error: oklch(65% 0.2 25);
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* Dark theme - auto-activates via prefers-color-scheme */
@plugin "daisyui/theme" {
  name: "openseo-dark";
  prefersdark: true;
  color-scheme: dark;
  --color-base-100: oklch(18% 0 0);
  --color-base-200: oklch(14% 0 0);
  --color-base-300: oklch(22% 0 0);
  --color-base-content: oklch(92% 0 0);
  --color-primary: oklch(60% 0.18 260);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(60% 0.15 145);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(60% 0.18 260);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(85% 0 0);
  --color-neutral-content: oklch(20% 0 0);
  --color-info: oklch(70% 0.15 230);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(65% 0.18 145);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(80% 0.15 80);
  --color-warning-content: oklch(100% 0 0);
  --color-error: oklch(65% 0.2 25);
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

html,
body {
  @apply m-0 bg-base-200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
}

/* Prevent Safari mobile from zooming on input focus (requires 16px minimum) */
input,
textarea,
select {
  @apply text-base;
}

/* Global input focus styling - use primary color instead of default ring */
.input:focus,
.input:focus-visible,
.textarea:focus,
.textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

/* Safe area utilities for mobile devices */
@layer utilities {
  .pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom, 0.5rem) + 0.5rem);
  }
  .pt-safe {
    padding-top: max(env(safe-area-inset-top, 0), 12px);
  }
}

/* Override DaisyUI dock's fixed positioning to use flex layout instead */
/* This allows the TabBar to work correctly with Safari's browser toolbar */
.dock {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  border-top: none;
  height: 4rem;
  padding-bottom: 0;
}

/* Touch device optimizations */
@media (pointer: coarse) {
  html {
    touch-action: none;
  }
  body {
    touch-action: pan-x pan-y;
  }
}

/* Custom alert styling with darker borders and transparent background */
.alert {
  @apply flex gap-3 rounded-lg border p-4 text-base-content/70;
}

.alert-warning {
  @apply border-warning/70 bg-warning/40 text-base-content/90;
}

.alert-info {
  @apply border-info/70 bg-info/40 text-base-content/90;
}

.alert-success {
  @apply border-success/70 bg-success/40 text-base-content/90;
}

.alert-error {
  @apply border-error/70 bg-error/40 text-base-content/90;
}

/* Tag chip colors — muted background + readable text in both themes.
   Text uses darker shades on light theme for contrast, lighter on dark. */
.tag-chip-slate {
  background-color: color-mix(in oklab, #64748b 14%, transparent);
  color: #334155;
  --tw-ring-color: color-mix(in oklab, #64748b 30%, transparent);
}
.tag-chip-rose {
  background-color: color-mix(in oklab, #f43f5e 14%, transparent);
  color: #9f1239;
  --tw-ring-color: color-mix(in oklab, #f43f5e 30%, transparent);
}
.tag-chip-amber {
  background-color: color-mix(in oklab, #f59e0b 16%, transparent);
  color: #92400e;
  --tw-ring-color: color-mix(in oklab, #f59e0b 32%, transparent);
}
.tag-chip-lime {
  background-color: color-mix(in oklab, #84cc16 16%, transparent);
  color: #3f6212;
  --tw-ring-color: color-mix(in oklab, #84cc16 32%, transparent);
}
.tag-chip-emerald {
  background-color: color-mix(in oklab, #10b981 14%, transparent);
  color: #065f46;
  --tw-ring-color: color-mix(in oklab, #10b981 30%, transparent);
}
.tag-chip-sky {
  background-color: color-mix(in oklab, #0ea5e9 14%, transparent);
  color: #075985;
  --tw-ring-color: color-mix(in oklab, #0ea5e9 30%, transparent);
}
.tag-chip-violet {
  background-color: color-mix(in oklab, #8b5cf6 16%, transparent);
  color: #5b21b6;
  --tw-ring-color: color-mix(in oklab, #8b5cf6 32%, transparent);
}
.tag-chip-fuchsia {
  background-color: color-mix(in oklab, #d946ef 14%, transparent);
  color: #86198f;
  --tw-ring-color: color-mix(in oklab, #d946ef 30%, transparent);
}

html[data-theme="openseo-dark"] .tag-chip-slate {
  color: #cbd5e1;
}
html[data-theme="openseo-dark"] .tag-chip-rose {
  color: #fda4af;
}
html[data-theme="openseo-dark"] .tag-chip-amber {
  color: #fcd34d;
}
html[data-theme="openseo-dark"] .tag-chip-lime {
  color: #d9f99d;
}
html[data-theme="openseo-dark"] .tag-chip-emerald {
  color: #6ee7b7;
}
html[data-theme="openseo-dark"] .tag-chip-sky {
  color: #7dd3fc;
}
html[data-theme="openseo-dark"] .tag-chip-violet {
  color: #c4b5fd;
}
html[data-theme="openseo-dark"] .tag-chip-fuchsia {
  color: #f5d0fe;
}

/* Keyword difficulty score badges — muted/transparent style to match tag chips */
.score-badge {
  @apply ring-1 ring-inset;
}

.score-tier-na {
  background-color: color-mix(in oklab, #94a3b8 12%, transparent);
  color: #475569;
  --tw-ring-color: color-mix(in oklab, #94a3b8 28%, transparent);
}

.score-tier-1 {
  background-color: color-mix(in oklab, #10b981 15%, transparent);
  color: #065f46;
  --tw-ring-color: color-mix(in oklab, #10b981 30%, transparent);
}

.score-tier-2 {
  background-color: color-mix(in oklab, #84cc16 15%, transparent);
  color: #3f6212;
  --tw-ring-color: color-mix(in oklab, #84cc16 30%, transparent);
}

.score-tier-3 {
  background-color: color-mix(in oklab, #eab308 16%, transparent);
  color: #854d0e;
  --tw-ring-color: color-mix(in oklab, #eab308 32%, transparent);
}

.score-tier-4 {
  background-color: color-mix(in oklab, #f97316 16%, transparent);
  color: #9a3412;
  --tw-ring-color: color-mix(in oklab, #f97316 32%, transparent);
}

.score-tier-5 {
  background-color: color-mix(in oklab, #ef4444 15%, transparent);
  color: #991b1b;
  --tw-ring-color: color-mix(in oklab, #ef4444 30%, transparent);
}

.score-tier-6 {
  background-color: color-mix(in oklab, #b91c1c 18%, transparent);
  color: #7f1d1d;
  --tw-ring-color: color-mix(in oklab, #b91c1c 32%, transparent);
}

html[data-theme="openseo-dark"] .score-tier-na {
  color: #cbd5e1;
}
html[data-theme="openseo-dark"] .score-tier-1 {
  color: #6ee7b7;
}
html[data-theme="openseo-dark"] .score-tier-2 {
  color: #bef264;
}
html[data-theme="openseo-dark"] .score-tier-3 {
  color: #fde047;
}
html[data-theme="openseo-dark"] .score-tier-4 {
  color: #fdba74;
}
html[data-theme="openseo-dark"] .score-tier-5 {
  color: #fca5a5;
}
html[data-theme="openseo-dark"] .score-tier-6 {
  color: #fda4af;
}

html[data-theme="openseo-dark"] {
  --trend-grid-color: oklch(78% 0.01 255 / 0.22);
  --trend-axis-color: oklch(84% 0.01 255 / 0.62);
  --trend-fill-start-opacity: 0.24;
  --trend-fill-end-opacity: 0.03;
  --trend-tooltip-bg: oklch(21% 0.01 255 / 0.95);
  --trend-tooltip-border: oklch(40% 0.01 255 / 0.65);
  --trend-tooltip-shadow: oklch(0% 0 0 / 0.35);
}

html[data-theme="openseo-dark"] .alert-warning {
  @apply border-warning/60 bg-warning/20;
}

html[data-theme="openseo-dark"] .alert-info {
  @apply border-info/60 bg-info/20;
}

html[data-theme="openseo-dark"] .alert-success {
  @apply border-success/60 bg-success/20;
}

html[data-theme="openseo-dark"] .alert-error {
  @apply border-error/60 bg-error/20;
}
