/**
 * Reworkd-style theme layer (see "DESIGN (1).md" — supersedes the earlier
 * Juicebox pass). Loaded after app.css (a pre-built, purged Tailwind bundle
 * with no live build step here), so these rules override the compiled
 * utility classes by matching the same selectors and winning on source
 * order rather than specificity.
 */

:root {
  --color-iris-blue: #3161df;
  --color-cobalt: #3e79ea;
  --color-cobalt-grad-from: #5897f7;
  --color-cobalt-grad-to: #3872e6;
  --color-sky-glow: #3e9ed0;
  --color-mint-pulse: #89ecb0;
  --color-midnight-iris: #2c65d3;
  --color-ink: #272c30;
  --color-pure-white: #ffffff;
  --color-lavender-mist: #f0f5fe;
  --color-pale-slate: #e3e8ea;
  --color-dove-gray: #a6b4ba;
  --color-iron: #526068;
  --color-graphite: #60737a;

  --bg: var(--color-lavender-mist);
  --panel: var(--color-pure-white);
  --border: var(--color-pale-slate);
  --text: var(--color-ink);
  --muted: var(--color-iron);
  --accent: var(--color-cobalt);
}

.dark {
  /* DESIGN (1).md is light-only ("a daylight system"); this keeps the
     existing dark shell but swaps the accent family to Cobalt/Iris Blue so
     the two themes read as the same product. */
  --bg: #14181b;
  --panel: #1b2124;
  --border: #2c3438;
  --text: #e7ebee;
  --muted: #93a1a8;
  --accent: #6fa0f2;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
}

/* Selecta substitute: display serif reserved for page-level headlines
   (18px+ only, per DESIGN's "never below 18px" rule) — never body copy. */
h1, h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.02em;
  font-weight: 500;
}

code, .font-mono, .label, .th {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.04em;
}

/* ---- Surfaces & elevation: hairline border is the primary elevation cue;
   shadows are reserved for the primary button and floating overlays. ---- */

.card {
  border-radius: 6px;
  border-color: var(--color-pale-slate);
  background-color: var(--color-pure-white);
  box-shadow: none;
}
.card:is(.dark *) {
  border-color: #2c3438;
  background-color: #1b2124;
}

.shadow-sm {
  box-shadow: rgba(63, 70, 75, .04) 0 0 8px 0, rgba(63, 70, 75, .03) 0 1px 5px 0, rgba(55, 61, 66, .05) 0 0 0 1px;
}
.shadow-2xl {
  box-shadow: rgba(63, 70, 75, .1) 0 21px 44px -32px, rgba(39, 44, 48, .2) 0 26px 30px -23px,
    rgba(39, 44, 48, .05) 0 14px 40px 0, rgba(39, 44, 48, .08) 0 0 0 1px, rgba(39, 44, 48, .12) 0 4px 8px 0;
}

/* ---- Buttons ---- */

.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-ghost {
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.btn-primary {
  background-image: linear-gradient(var(--color-cobalt-grad-from) 0%, var(--color-cobalt-grad-to) 100%);
  background-color: var(--color-cobalt);
  color: #ffffff;
  box-shadow: rgba(255, 255, 255, .25) 0 1px 0 0 inset, rgba(26, 41, 61, .15) 0 1px 3px 0,
    rgba(26, 41, 61, .11) 0 7px 11px -5px, rgba(26, 41, 61, .08) 0 0 0 1px;
}
.btn-primary:hover {
  background-image: linear-gradient(#4a89f5 0%, #2f68d8 100%);
}
.btn-primary:focus {
  box-shadow: inset 0 0 0 1px var(--color-iris-blue);
}

.btn-secondary {
  border: 1px solid var(--color-dove-gray);
  background-color: transparent;
  color: var(--color-ink);
}
.btn-secondary:hover {
  background-color: var(--color-pale-slate);
}
.btn-secondary:is(.dark *) {
  border-color: #3a444a;
  background-color: transparent;
  color: #e7ebee;
}
.btn-secondary:hover:is(.dark *) {
  background-color: #232a2e;
}

.btn-ghost {
  color: var(--color-iron);
}
.btn-ghost:hover {
  background-color: var(--color-pale-slate);
  color: var(--color-ink);
}
.btn-ghost:is(.dark *) {
  color: #93a1a8;
}
.btn-ghost:hover:is(.dark *) {
  background-color: #232a2e;
  color: #e7ebee;
}

/* ---- Inputs ---- */

.input, .select {
  border-radius: 6px;
  border-color: var(--color-dove-gray);
  background-color: var(--color-pure-white);
  color: var(--color-ink);
}
.input:focus, .select:focus {
  border-color: var(--color-iris-blue);
  box-shadow: inset 0 0 0 1px var(--color-iris-blue);
}
.input:is(.dark *), .select:is(.dark *) {
  border-color: #2c3438;
  background-color: #1b2124;
  color: #e7ebee;
}

.label {
  color: var(--color-iron);
  letter-spacing: 0.04em;
}
.label:is(.dark *) {
  color: #93a1a8;
}

.th {
  color: var(--color-graphite);
  letter-spacing: 0.04em;
}
.th:is(.dark *) {
  color: #7c8a90;
}

/* ---- 6px radius for rectangular surfaces; 9999px stays reserved for
   pills/tags/circular icons (rounded-full is left untouched). ---- */

.rounded, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-t, .rounded-r-xl {
  border-radius: 6px;
}

/* ---- Cobalt/Iris Blue accent family replacing the former "primary" ramp ---- */

.bg-primary-50 { background-color: var(--color-lavender-mist); }
.bg-primary-100 { background-color: #dde9fb; }
.bg-primary-500 { background-color: var(--color-cobalt); }
.bg-primary-500\/80 { background-color: rgba(62, 121, 234, .8); }
.bg-primary-600 { background-color: var(--color-iris-blue); }
.dark\:bg-primary-600\/80:is(.dark *) { background-color: rgba(49, 97, 223, .8); }
.dark\:bg-primary-950\/30:is(.dark *) { background-color: rgba(24, 41, 74, .3); }
.dark\:bg-primary-950\/50:is(.dark *) { background-color: rgba(24, 41, 74, .5); }
.dark\:hover\:bg-primary-950\/20:hover:is(.dark *) { background-color: rgba(24, 41, 74, .2); }

.border-primary-200 { border-color: #c3d9f8; }
.border-primary-300 { border-color: #9cc0f4; }
.border-primary-600 { border-color: var(--color-iris-blue); }
.dark\:border-primary-800:is(.dark *) { border-color: #2c4a86; }
.dark\:border-primary-900:is(.dark *) { border-color: #1f3766; }

.text-primary-400 { color: #6fa0f2; }
.text-primary-500 { color: var(--color-cobalt); }
.text-primary-600 { color: var(--color-iris-blue); }
.text-primary-700 { color: var(--color-midnight-iris); }
.dark\:text-primary-300:is(.dark *) { color: #a8c7f8; }
.dark\:text-primary-400:is(.dark *) { color: #6fa0f2; }
.hover\:text-primary-700:hover { color: var(--color-midnight-iris); }

.from-primary-500 {
  --tw-gradient-from: var(--color-cobalt-grad-from) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(88, 151, 247, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary-700 { --tw-gradient-to: var(--color-cobalt-grad-to) var(--tw-gradient-to-position); }

.accent-primary-500 { accent-color: var(--color-cobalt); }

input[type="checkbox"] {
  accent-color: var(--color-cobalt);
}

/* Not in the pre-built Tailwind bundle (never used before the folder-count
   panel) — keeps digits from jittering in width as counts change. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Also not in the pre-built bundle: the mismatch-row highlight in the
   folder-count panel. */
.bg-amber-50\/70 {
  background-color: rgba(255, 251, 235, .7);
}
.dark\:bg-amber-950\/20:is(.dark *) {
  background-color: rgba(69, 26, 3, .2);
}
.bg-slate-50\/70 {
  background-color: rgba(248, 250, 252, .7);
}
.dark\:bg-slate-900\/40:is(.dark *) {
  background-color: rgba(15, 23, 42, .4);
}
.normal-case {
  text-transform: none;
}
.tracking-normal {
  letter-spacing: 0;
}
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.italic { font-style: italic; }
.text-right { text-align: right; }
.w-1\.5 { width: .375rem; }
.h-1\.5 { height: .375rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.gap-1\.5 { gap: .375rem; }
.text-\[10px\] { font-size: 10px; }
.dark\:text-amber-400:is(.dark *) { color: rgb(251 191 36); }
.text-amber-500 { color: rgb(245 158 11); }