/* =====================================================================
   Prime Koders v6 — theme layer (loaded last)
   1. Every Admin → Settings → Theme option reaches every part of the site:
      accent colour (text tints follow the accent), corners (chips, inputs,
      tags follow Rounded / Extra soft / Sharp), font and light/dark.
   2. Upwork-style motion: nav underline, page entrance, card lift, tab
      underline, button press, image zoom. All of it switches off for
      people who ask their device for reduced motion.
   ===================================================================== */

/* ---------- 1. Accent-derived tints (work for every accent preset) ---------- */
[data-theme="light"] { --indigo-text: var(--accent-2); }
[data-theme="dark"]  { --indigo-text: #c7f0bd; }
@supports (color: color-mix(in srgb, red 50%, white)) {
    [data-theme="light"] { --indigo-text: color-mix(in srgb, var(--accent) 62%, #0b1220); --accent-ink: color-mix(in srgb, var(--accent) 70%, #0b1220); }
    [data-theme="dark"]  { --indigo-text: color-mix(in srgb, var(--accent) 55%, #ffffff); --accent-ink: color-mix(in srgb, var(--accent) 60%, #ffffff); }
}
[data-theme="dark"][data-accent="indigo"]  { --accent: #818cf8; --accent-rgb: 129, 140, 248; }
[data-theme="dark"][data-accent="rose"]    { --accent: #fb7185; --accent-rgb: 251, 113, 133; }
[data-theme="dark"][data-accent="violet"]  { --accent: #a78bfa; --accent-rgb: 167, 139, 250; }
[data-theme="dark"][data-accent="ocean"]   { --accent: #60a5fa; --accent-rgb: 96, 165, 250; }
:root { --accent-soft: rgba(var(--accent-rgb), 0.1); --accent-line: rgba(var(--accent-rgb), 0.45); }

/* ---------- Corners follow the admin setting ---------- */
[data-radius="sharp"] .tag, [data-radius="sharp"] .chip, [data-radius="sharp"] .skill-chip, [data-radius="sharp"] .pill,
[data-radius="sharp"] .hero-tabs, [data-radius="sharp"] .hero-tabs button, [data-radius="sharp"] .role-chip, [data-radius="sharp"] .chip-check span,
[data-radius="sharp"] .filter-find, [data-radius="sharp"] .sector-search input, [data-radius="sharp"] .hero-tags a, [data-radius="sharp"] .form-steps,
[data-radius="sharp"] .form-steps a, [data-radius="sharp"] .checkout-steps li, [data-radius="sharp"] .search-box, [data-radius="sharp"] .currency-btn,
[data-radius="sharp"] .plan-ribbon, [data-radius="sharp"] .plan-badge, [data-radius="sharp"] .ribbon, [data-radius="sharp"] .ws-count,
[data-radius="sharp"] .coupon-chip, [data-radius="sharp"] .helpful-btn, [data-radius="sharp"] .date-sep span { border-radius: var(--radius-sm) !important; }
[data-radius="sharp"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-radius="sharp"] select, [data-radius="sharp"] textarea { border-radius: var(--radius-sm); }
[data-radius="soft"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-radius="soft"] select { border-radius: 12px; }
[data-radius="soft"] .card, [data-radius="soft"] .ws-box { border-radius: var(--radius); }

/* ---------- 2. Upwork-style motion ---------- */
/* Main navigation: a green line grows under the link you point at */
.main-nav a { position: relative; transition: color 0.18s ease; }
.main-nav a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { box-shadow: none; }

/* Pages ease in */
.site-main > .container { animation: page-in 0.35s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cards lift a little; images zoom slowly */
.project-card, .campaign-card, .dev-card, .card.plan-card, .posted-job, .proposal { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s ease; }
.project-card:hover, .campaign-card:hover, .dev-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1); border-color: rgba(var(--accent-rgb), 0.35); }
[data-theme="dark"] .project-card:hover, [data-theme="dark"] .campaign-card:hover, [data-theme="dark"] .dev-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }
.card-media { overflow: hidden; }
.card-media img { transition: transform 0.5s var(--ease); }
.project-card:hover .card-media img, .campaign-card:hover .card-media img { transform: scale(1.04); }

/* Buttons: soft colour change and a small press */
.btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tabs: the underline slides in */
.tabs-ui a, .tabs-ui button, .tabs a { position: relative; transition: color 0.18s ease, background-color 0.18s ease; }
.tabs-ui a::after, .tabs-ui button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.25s var(--ease); }
.tabs-ui a.active::after, .tabs-ui button.active::after { transform: scaleX(1); }
.tabs-ui button.active, .tabs-ui a.active { border-bottom-color: transparent; }

/* Panels that open */
.tab-panel:not([hidden]) { animation: fade-in 0.25s ease both; }
details[open] > :not(summary) { animation: fade-in 0.25s ease both; }
.notice, .alert { animation: slide-down 0.3s var(--ease) both; }

/* Links in text: Upwork-like underline on hover */
.prose a, .job-card-text a, .card-text a { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.18s; }
.prose a:hover { text-decoration-color: var(--accent); }

/* Smooth light/dark switch */
html.theme-anim body, html.theme-anim .card, html.theme-anim .site-header, html.theme-anim .sidebar { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
    .site-main > .container, .tab-panel:not([hidden]), details[open] > :not(summary), .notice, .alert { animation: none !important; }
    .project-card:hover, .campaign-card:hover, .dev-card:hover, .plan-card:hover { transform: none; }
    .card-media img, .main-nav a::after, .tabs-ui a::after, .tabs-ui button::after, .btn { transition: none; }
    .project-card:hover .card-media img, .campaign-card:hover .card-media img { transform: none; }
}