/* ============================================
   ALIGNU — Tailwind CSS Variables Palette
   Style: dark-first, calm, human, coach-like
   Usage: drop into globals.css (or any global stylesheet)
   Works with Tailwind + shadcn/ui style tokens.
   ============================================ */

:root {
  /* --------- LIGHT MODE (optional) --------- */
  --background: 40 27% 96%;        /* #F5F3EF */
  --foreground: 210 14% 11%;       /* #1A1D21 */

  --card: 40 27% 98%;              /* #FAF8F4 */
  --card-foreground: 210 14% 11%;  /* #1A1D21 */

  --popover: 40 27% 98%;
  --popover-foreground: 210 14% 11%;

  --primary: 22 52% 52%;           /* #C07A4A (Warm Clay) */
  --primary-foreground: 0 0% 100%; /* #FFFFFF */

  --secondary: 110 9% 46%;         /* #6E7F6B (Muted Sage) */
  --secondary-foreground: 0 0% 100%;

  --muted: 30 14% 90%;             /* soft sand muted */
  --muted-foreground: 210 8% 35%;  /* muted text */

  --accent: 30 22% 88%;            /* warm accent surface */
  --accent-foreground: 210 14% 11%;

  --destructive: 0 72% 52%;        /* keep standard red */
  --destructive-foreground: 0 0% 100%;

  --border: 30 10% 85%;
  --input: 30 10% 85%;
  --ring: 22 52% 52%;              /* primary ring */

  --radius: 16px;                  /* 2xl-ish */
}

.dark {
  /* --------- DARK MODE (default recommended) --------- */
  --background: 210 17% 7%;        /* #0F1216 (Deep Charcoal) */
  --foreground: 36 15% 90%;        /* #E8E4DE (Soft Sand) */

  --card: 210 16% 9%;              /* #131820 */
  --card-foreground: 36 15% 90%;   /* #E8E4DE */

  --popover: 210 16% 9%;
  --popover-foreground: 36 15% 90%;

  --primary: 22 52% 52%;           /* #C07A4A (Warm Clay) */
  --primary-foreground: 210 17% 7%;/* #0F1216 */

  --secondary: 110 9% 46%;         /* #6E7F6B (Muted Sage) */
  --secondary-foreground: 210 17% 7%;

  --muted: 210 12% 14%;            /* muted surface */
  --muted-foreground: 36 10% 70%;  /* dim sand */

  --accent: 210 12% 14%;
  --accent-foreground: 36 15% 90%;

  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 210 12% 16%;
  --input: 210 12% 16%;
  --ring: 22 52% 52%;

  --radius: 16px;
}

/* ----------------------------------------------------
   OPTIONAL: Extended tokens (Alignu-specific)
   Use these for charts, tags, highlights, statuses
   ---------------------------------------------------- */
:root {
  /* Warm neutrals (surfaces / separators) */
  --surface-1: 40 27% 98%;         /* light: #FAF8F4 */
  --surface-2: 30 22% 88%;
  --surface-3: 30 14% 90%;

  /* Text hierarchy (light) */
  --text-1: 210 14% 11%;           /* primary text */
  --text-2: 210 10% 25%;           /* secondary text */
  --text-3: 210 8% 35%;            /* tertiary text */

  /* Semantic */
  --success: 110 14% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 90% 50%;
  --warning-foreground: 210 17% 7%;
  --info: 205 70% 45%;
  --info-foreground: 0 0% 100%;

  /* Highlight for "Insight key sentence" */
  --insight: 22 52% 52%;           /* same as primary */
  --insight-soft: 22 35% 90%;      /* light background highlight */

  /* Focus / selection */
  --focus: 22 52% 52%;
}

.dark {
  /* Warm neutrals (surfaces / separators) */
  --surface-1: 210 16% 9%;         /* #131820 */
  --surface-2: 210 12% 14%;
  --surface-3: 210 12% 16%;

  /* Text hierarchy (dark) */
  --text-1: 36 15% 90%;            /* #E8E4DE */
  --text-2: 36 10% 78%;
  --text-3: 36 10% 70%;

  /* Semantic */
  --success: 110 14% 45%;
  --success-foreground: 210 17% 7%;
  --warning: 38 90% 55%;
  --warning-foreground: 210 17% 7%;
  --info: 205 70% 55%;
  --info-foreground: 210 17% 7%;

  /* Highlight for "Insight key sentence" */
  --insight: 22 52% 52%;
  --insight-soft: 22 20% 18%;      /* dark warm tint */

  /* Focus / selection */
  --focus: 22 52% 52%;
}

/* Utility classes for Alignu theme */
.bg-surface-1 {
  background-color: hsl(var(--surface-1));
}

.bg-surface-2 {
  background-color: hsl(var(--surface-2));
}

.bg-surface-3 {
  background-color: hsl(var(--surface-3));
}

.text-text-1 {
  color: hsl(var(--text-1));
}

.text-text-2 {
  color: hsl(var(--text-2));
}

.text-text-3 {
  color: hsl(var(--text-3));
}

.bg-insight {
  background-color: hsl(var(--insight));
}

.bg-insight-soft {
  background-color: hsl(var(--insight-soft));
}

.text-insight {
  color: hsl(var(--insight));
}

.border-insight {
  border-color: hsl(var(--insight));
}

/* Default dark mode */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ============================================
   GLOBAL INPUT, SELECT, TEXTAREA STYLES
   Dark theme for all form elements
   ============================================ */

/* Input fields (text, email, password, date, number, etc.) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: hsl(var(--input)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: var(--radius);
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 1;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 2px hsla(var(--ring), 0.2) !important;
}

/* Select dropdown styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23E8E4DE' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Select option styling */
select option {
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
}

/* Disabled states */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: hsl(var(--muted)) !important;
}

/* Hover states for select */
select:hover:not(:disabled) {
  background-color: hsl(var(--surface-3));
}