/* /assets/css/theme-light.css
   Light theme tokens (v7) — darker gray text for better contrast
*/

:root,
[data-theme="light"] {
  --brand-h: 215;
  --brand-s: 90%;
  --brand-l: 50%;

  --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-2: hsl(var(--brand-h) 85% 58%);

  /* Backgrounds */
  --bg: #c9d3e3;
  --surface: #e9eef6;
  --surface-2: #d3dced;

  /* Main text */
  --text: #000000;
  --text-2: #050a14;

  /* 🔥 Darker gray tones (this is what you asked for) */
  --muted: #1f2937;              /* was too light before */
  --input-placeholder: #374151; /* darker placeholder */
  --tag-text: #1e3a8a;

  /* Borders */
  --border: rgba(0, 0, 0, 0.35);
  --border-2: rgba(0, 0, 0, 0.45);

  --success: #166534;
  --warning: #92400e;
  --danger: #991b1b;
  --info: #1e40af;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(0, 0, 0, 0.14);

  --focus: rgba(30, 64, 175, 0.40);

  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;

  --container-max: 1100px;
  --header-h: 56px;
  --bottom-nav-h: 64px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Inputs */
  --input-bg: #dbe4f2;
  --input-text: #000000;
  --input-border: rgba(0, 0, 0, 0.45);

  --overlay: rgba(0, 0, 0, 0.55);

  --chart-1: hsl(var(--brand-h) 90% 50%);
  --chart-2: #059669;
  --chart-3: #d97706;
  --chart-4: #dc2626;

  --code-bg: rgba(0, 0, 0, 0.12);
  --tag-bg: rgba(30, 64, 175, 0.18);
}

/* -------------------------------------------------
   Force muted/secondary text to be darker
-------------------------------------------------- */
[data-theme="light"] .small,
[data-theme="light"] .help,
[data-theme="light"] .item__sub,
[data-theme="light"] .item__foot,
[data-theme="light"] .identity__label,
[data-theme="light"] .kpi__label {
  color: var(--muted) !important;
}

/* Form controls */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--input-placeholder) !important;
}

[data-theme="light"] select option {
  background-color: var(--input-bg);
  color: var(--input-text);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}