/* ==========================================================================
   main.css — Lumina Studio
   Variables · Reset · Typography · Utilities · Atoms
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&family=Inter:wght@600;700;800&display=swap');

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  /* ── Accent colour — hue set by server via head_meta.php <style> injection.
        Do NOT set --accent-h here — CSS :root loads after <style> in <head>
        and would override the server-injected value.                         ── */
  --clr-primary:    hsl(var(--accent-h, 30), 52%, 56%);
  --clr-primary-lt: hsl(var(--accent-h, 30), 62%, 67%);
  --clr-danger:     #C0614E;
  --clr-teal:       #7BBFB0;
  --clr-violet:     #9B8EC4;

  /* ── Background — hue set by server via head_meta.php <style> injection.
        Do NOT set --bg-h here for the same reason.
        The fallback values inside hsl(..., 20) ensure the page always
        renders even before JS or the inline style applies.                   ── */
  --bg-0: hsl(var(--bg-h, 20), 36%, 7%);
  --bg-1: hsl(var(--bg-h, 20), 33%, 10%);
  --bg-2: hsl(var(--bg-h, 20), 30%, 13%);
  --bg-3: hsl(var(--bg-h, 20), 28%, 15%);
  --bg-4: hsl(var(--bg-h, 20), 26%, 18%);
  --bg-5: hsl(var(--bg-h, 20), 32%, 11%);

  /* Text */
  --txt-1: hsl(var(--bg-h, 20), 58%, 93%);
  --txt-2: hsl(var(--bg-h, 20), 22%, 56%);
  --txt-3: hsl(var(--bg-h, 20), 16%, 36%);

  /* Borders — derive from accent hue */
  --bdr-lo: hsla(var(--accent-h, 30), 44%, 57%, .10);
  --bdr-md: hsla(var(--accent-h, 30), 44%, 57%, .18);
  --bdr-hi: hsla(var(--accent-h, 30), 44%, 57%, .28);

  /* Status */
  --ok:   #5DBF8A;
  --warn: #E8A030;
  --err:  #E05A4A;
  --info: #7BBFB0;

  /* Layout */
  --sidebar-w:     256px;
  --sidebar-col-w: 70px;
  --topbar-h:      64px;

  /* Type */
  --f-display: 'Syne',    sans-serif;
  --f-body:    'DM Sans', sans-serif;
  --f-num:     'Inter',   sans-serif;

  /* Radius */
  --r-sm: 5px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadow */
  --shadow:       0 1px 12px rgba(0,0,0,.6), 0 0 0 1px var(--bdr-lo);
  --shadow-modal: 0 8px 64px rgba(0,0,0,.8);

  /* Motion */
  --ease: .15s ease;
  --ease-md: .25s ease;
  --ease-lg: .4s cubic-bezier(.16,1,.3,1);
}

[data-theme="light"] {
  --bg-0: hsl(var(--bg-h, 20), 40%, 97%);
  --bg-1: hsl(var(--bg-h, 20), 36%, 91%);
  --bg-2: #FFFFFF;
  --bg-3: #FFFFFF;
  --bg-4: hsl(var(--bg-h, 20), 34%, 88%);
  --bg-5: hsl(var(--bg-h, 20), 38%, 95%);
  --txt-1: hsl(var(--bg-h, 20), 64%, 8%);
  --txt-2: hsl(var(--bg-h, 20), 28%, 34%);
  --txt-3: hsl(var(--bg-h, 20), 22%, 56%);
  --bdr-lo: hsla(var(--accent-h, 30), 44%, 35%, .08);
  --bdr-md: hsla(var(--accent-h, 30), 44%, 35%, .14);
  --bdr-hi: hsla(var(--accent-h, 30), 44%, 35%, .22);
  --shadow: 0 1px 8px rgba(0,0,0,.10), 0 0 0 1px var(--bdr-lo);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--txt-1);
  background: var(--bg-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  zoom: 0.8;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--txt-1);
}

a    { color: var(--clr-primary); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--clr-primary-lt); }

img, svg  { display: block; max-width: 100%; }
ul, ol    { list-style: none; }
button    { cursor: pointer; }

button, input, select, textarea {
  font: inherit;
  border: none;
  outline: none;
  background: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr-hi); border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap:  4px; }
.gap-2 { gap:  8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.w-full    { width: 100%; }
.ml-auto   { margin-left: auto; }
.mt-2      { margin-top:    8px; }
.mt-4      { margin-top:   16px; }
.mb-2      { margin-bottom: 8px; }
.mb-4      { margin-bottom:16px; }
.truncate  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden    { display: none !important; }
.relative  { position: relative; }
.overflow-hidden { overflow: hidden; }

/* Text helpers */
.text-xs  { font-size: .72rem; }
.text-sm  { font-size: .80rem; }
.font-600 { font-weight: 600; font-variant-numeric: tabular-nums; }
.font-700 { font-weight: 700; }

.text-muted     { color: var(--txt-3); }
.text-secondary { color: var(--txt-2); }
.text-gold      { color: var(--clr-primary); }
.text-success   { color: var(--ok); }
.text-danger    { color: var(--err); }
.text-warning   { color: var(--warn); }

/* Misc */
.divider  { height: 1px; background: var(--bdr-lo); margin: 12px 0; }
.border-t { border-top: 1px solid var(--bdr-lo); }
.rounded  { border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-success { background: rgba( 93,191,138,.14); color: var(--ok);          }
.badge-warning { background: rgba(232,160, 48,.14); color: var(--warn);        }
.badge-danger  { background: rgba(224, 90, 74,.14); color: var(--err);         }
.badge-info    { background: rgba(123,191,176,.14); color: var(--info);        }
.badge-gold    { background: hsla(var(--accent-h),52%,56%,.14); color: var(--clr-primary); }
.badge-rose    { background: rgba(192, 97, 78,.14); color: var(--clr-danger);  }
.badge-violet  { background: rgba(155,142,196,.14); color: var(--clr-violet);  }
.badge-neutral { background: var(--bg-4);            color: var(--txt-2);       }

/* --------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------- */
.avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-danger));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .72rem;
  color: #fff;
  flex-shrink: 0;
}
.avatar.sm { width: 26px; height: 26px; font-size: .60rem; }
.avatar.lg { width: 44px; height: 44px; font-size: .90rem; }
.avatar.xl { width: 60px; height: 60px; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Spinner
   -------------------------------------------------------------------------- */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--bdr-md);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes shake     { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.anim-fade-up { animation: fadeInUp .45s cubic-bezier(.16,1,.3,1) both; }
.anim-fade-in { animation: fadeIn   .3s ease both; }

.d-1 { animation-delay: .05s; }
.d-2 { animation-delay: .10s; }
.d-3 { animation-delay: .16s; }
.d-4 { animation-delay: .22s; }
.d-5 { animation-delay: .28s; }
.d-6 { animation-delay: .34s; }
