/*
 * app.css — component + primary-color styles for The Credit · "The Ascent"
 *
 * Loaded before ds.css. Colors are driven by the ds.css design tokens
 * (--paper, --ink, --blaze, ...) so every component here is theme-aware
 * (light parchment / dark night-mountain) with no per-rule .dark duplicates.
 * ds.css redefines the richer .btn/.card/.input/.badge components; the rules
 * here are the compatible fallbacks plus the `primary-*` utility backstop for
 * templates that reference those classes directly.
 */

/* ---- Base helpers ---------------------------------------------------- */
[x-cloak] { display: none !important; }

body {
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 100, 60, 0.22); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 100, 60, 0.38); }
.dark ::-webkit-scrollbar-thumb { background: rgba(220, 200, 150, 0.16); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(220, 200, 150, 0.3); }

/* Smooth transitions for theme switching */
* {
    transition-property: background-color, border-color;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}
.no-transition, .no-transition * { transition-property: none !important; }

/* Mobile touch optimization */
button, a, [role="button"], .btn, input[type="submit"], input[type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* iOS safe area support */
.sticky { padding-top: env(safe-area-inset-top); }
body { padding-bottom: env(safe-area-inset-bottom); }

/* ---- Buttons (fallbacks; ds.css provides the primary look) ----------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; border-radius: var(--r-sm, 8px);
    padding: 0.7rem 1.15rem; font-size: 0.9375rem; line-height: 1.25rem;
    transition: all 160ms ease-out; cursor: pointer; text-decoration: none;
}
.btn:focus, .btn:focus-visible { outline: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background-color: var(--blaze); color: var(--on-blaze); box-shadow: var(--sh-1); }
.btn-primary:hover { background-color: var(--blaze-press); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blaze) 30%, transparent); }

.btn-secondary { background-color: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { background-color: var(--surface-2); }

.btn-ghost { color: var(--blaze); background-color: transparent; }
.btn-ghost:hover { background-color: var(--surface-2); }

.btn-danger { background-color: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background-color: color-mix(in srgb, var(--danger) 22%, transparent); }

/* ---- Cards ----------------------------------------------------------- */
.card {
    background-color: var(--surface); border-radius: var(--r-lg, 16px);
    box-shadow: var(--sh-1); border: 1px solid var(--line); transition: all 160ms;
}
.card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-0.125rem); }

/* ---- Inputs ---------------------------------------------------------- */
.input {
    display: block; width: 100%; border-radius: var(--r-sm, 8px);
    border: 1px solid var(--line); background-color: var(--surface);
    padding: 0.8rem 0.9rem; color: var(--ink); font-size: 16px; transition: all 160ms;
}
.input::placeholder { color: var(--ink-3); }
.input:hover:not(:focus) { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--blaze); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blaze) 18%, transparent); }

.label {
    display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.45rem;
}

/* ---- Links ----------------------------------------------------------- */
.link { color: var(--blaze); transition: color 150ms; text-underline-offset: 2px; }
.link:hover { color: var(--blaze-press); text-decoration: underline; }

/* ---- Badges ---------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; border-radius: 9999px;
    padding: 0.25rem 0.65rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.04em; transition: color 150ms;
}
.badge-success { background-color: var(--ok-bg); color: var(--ok); }
.badge-warning { background-color: var(--warn-bg); color: var(--warn); }
.badge-danger { background-color: var(--danger-bg); color: var(--danger); }
.badge-neutral { background-color: var(--surface-2); color: var(--ink-2); }

/* ---- Loading skeleton ------------------------------------------------ */
.skeleton {
    background-image: linear-gradient(to right, var(--surface-2), var(--surface-3), var(--surface-2));
    background-size: 200% 100%; animation: shimmer 2s infinite linear; border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ---- Glass effect ---------------------------------------------------- */
.glass {
    background-color: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* ---- Tables ---------------------------------------------------------- */
.table-container { overflow: hidden; border-radius: var(--r-lg, 16px); border: 1px solid var(--line); }
.table-container table { min-width: 100%; }
.table-container thead { background-color: var(--surface-2); }
.table-container th {
    padding: 0.9rem 1.25rem; text-align: left; font-family: var(--mono); font-size: 0.7rem;
    font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em;
}
.table-container td {
    padding: 0.9rem 1.25rem; font-size: 0.875rem; color: var(--ink); border-top: 1px solid var(--line-2);
}
.table-container tbody tr { background-color: var(--surface); transition: background-color 150ms; }
.table-container tbody tr:hover { background-color: var(--surface-2); }

/* ---- Modal backdrop -------------------------------------------------- */
.modal-backdrop {
    position: fixed; inset: 0; background-color: rgba(24, 18, 8, 0.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.62); }

/*
 * ---- primary-* utilities (trail-blaze) -------------------------------
 * Backstop for templates referencing these classes directly, so CTAs
 * render even when the Play CDN cannot generate them.
 * blaze: 50 #FDF1E7 100 #F8DDC3 300 #E29D5C 400 #D3852F
 *        500 #C26A24 600 #A9591B 700 #8A4917 900 #5B3212
 */
.bg-primary-50 { background-color: #FDF1E7; }
.bg-primary-100 { background-color: #F8DDC3; }
.bg-primary-500 { background-color: #C26A24; }
.bg-primary-600 { background-color: #A9591B; }
.bg-primary-900 { background-color: #5B3212; }
.hover\:bg-primary-700:hover { background-color: #8A4917; }

.text-primary-400 { color: #D3852F; }
.text-primary-600 { color: #A9591B; }
.text-primary-700 { color: #8A4917; }
.hover\:text-primary-300:hover { color: #E29D5C; }
.hover\:text-primary-500:hover { color: #C26A24; }
.hover\:text-primary-700:hover { color: #8A4917; }
.hover\:text-primary-900:hover { color: #5B3212; }

.border-primary-500 { border-color: #C26A24; }

.ring-primary-500 { --tw-ring-color: #C26A24; box-shadow: 0 0 0 2px #C26A24; }
.focus\:ring-primary-500:focus { --tw-ring-color: #C26A24; box-shadow: 0 0 0 2px #C26A24; }