/* =====================================================================
   Nili Coach Book - shared theme
   Tokens (color, font, spacing, radius, shadow, motion) + base components.
   Loaded after styles.css so it re-skins the whole app through the same
   CSS variables the older screens already use. Dark mode stays available
   as a variant (Settings), the cream/navy look is the default.
   Motion rule: only transform and opacity are ever animated.
   ===================================================================== */

/* Optional self-hosted Vazirmatn (see fonts/README.txt); harmless 404 when the files are absent */
@font-face{font-family:'VazirLocal'; src:url('/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap;}
@font-face{font-family:'VazirLocal'; src:url('/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap;}
@font-face{font-family:'VazirLocal'; src:url('/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:600 800; font-display:swap;}

:root{
  /* spacing scale */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  /* radius */
  --radius-sm:12px; --radius:16px; --radius-lg:20px;
  /* motion */
  --dur:250ms; --dur-rise:400ms; --dur-page:200ms; --ease:cubic-bezier(.22,.61,.36,1);
  --font:'VazirLocal','Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
}

:root, :root[data-theme="light"]{
  --bg:#F5F0E8; --bg-2:#EFE8DC;
  --surface:rgba(255,253,248,.80);
  --surface-2:rgba(255,255,255,.72);
  --surface-3:rgba(43,58,103,.07);
  --surface-solid:#FFFDF9;
  --border:rgba(43,58,103,.10); --border-strong:rgba(43,58,103,.22);
  --text:#2B3A67;                 /* navy: titles + main text */
  --text-muted:#5A6482;           /* secondary, >= 4.5:1 on cream */
  --text-faint:#8A91A6;
  --accent:#2B3A67; --accent-ink:#FFFFFF; --accent-soft:rgba(43,58,103,.10);
  --danger:#A8433F; --danger-soft:rgba(168,67,63,.12);
  --success:#3B7656; --success-soft:rgba(59,118,86,.13);
  --shadow-top:0 8px 28px rgba(43,58,103,.07), inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-hover:0 16px 38px rgba(43,58,103,.14);
  --wave-stroke:rgba(43,58,103,.13);
  --input-bg:rgba(255,255,255,.85); --input-border:rgba(43,58,103,.20);
  --overlay:rgba(43,58,103,.32);
}
:root[data-theme="dark"]{
  --accent:#d9a441; --accent-ink:#241a06; --accent-soft:rgba(217,164,65,.15);
  --surface-solid:#17171a;
  --shadow-top:inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-hover:0 16px 38px rgba(0,0,0,.5);
  --wave-stroke:rgba(255,255,255,.05);
  --input-bg:var(--surface-2); --input-border:var(--border);
  --overlay:rgba(0,0,0,.55);
}

body{background:var(--bg); font-family:var(--font);}
:root[data-theme="light"] body{background:linear-gradient(160deg,var(--bg) 0%,var(--bg-2) 100%) fixed;}

/* thin line icons everywhere */
svg{stroke-width:1.5;}

/* ---------------------------------------------------------------------
   Background: very soft wave lines in the corners, slowly drifting
   (15-20s loop, transform only). Switched off by reduced-motion.
   --------------------------------------------------------------------- */
.bg-waves{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.bg-waves svg{position:absolute; width:900px; max-width:none; height:auto; fill:none; stroke:var(--wave-stroke); stroke-width:1; will-change:transform;}
.bg-waves .w1{top:-160px; right:-220px; animation:drift-a 18s ease-in-out infinite alternate;}
.bg-waves .w2{bottom:-200px; left:-260px; animation:drift-b 20s ease-in-out infinite alternate;}
@keyframes drift-a{from{transform:translate3d(0,0,0) rotate(0deg)} to{transform:translate3d(-40px,28px,0) rotate(3deg)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) rotate(0deg)} to{transform:translate3d(46px,-30px,0) rotate(-3deg)}}

/* ---------------------------------------------------------------------
   Components
   --------------------------------------------------------------------- */

/* PageHeader: round logo top-left, title centered between two thin lines */
.page-head{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-bottom:var(--sp-5); padding:0 56px;
}
.page-head .logo-img{position:absolute; left:0; top:-4px; width:46px; height:46px; border-radius:50%; object-fit:contain;}
.page-head-title{display:flex; align-items:center; gap:var(--sp-4); width:100%; max-width:640px;}
.page-head-title::before,.page-head-title::after{content:""; flex:1; height:1px; background:var(--border-strong);}
.page-head h1{font-size:1.55rem; font-weight:600; color:var(--text); white-space:nowrap;}
.page-head p{margin-top:.2rem; font-size:.85rem;}
.logo-dark{display:none;}
:root[data-theme="dark"] .logo-dark{display:inline-block;}
:root[data-theme="dark"] .logo-light{display:none;}

/* Card: translucent cream/white, 16-20px radius, very soft shadow, no hard border */
.card, .day-card, .ex-card, .assessment-card, .stat-mini, .list-row, .c-card{
  background:var(--surface); border:1px solid transparent; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-top);
}
.c-card{padding:var(--sp-4) var(--sp-5); position:relative;}
.c-card + .c-card{margin-top:var(--sp-4);}
.c-card h2,.c-card .c-title{font-size:1rem; font-weight:600; margin-bottom:var(--sp-3); color:var(--text);}

/* hover lift (2-3px) with the larger shadow on a pseudo layer: only transform + opacity move */
.lift{position:relative; transition:transform var(--dur) var(--ease);}
.lift::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--shadow-hover); opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none;}
.lift:hover,.lift:focus-visible{transform:translateY(-3px);}
.lift:hover::after,.lift:focus-visible::after{opacity:1;}

/* Button: primary (navy), secondary (soft), icon "+" */
.btn{border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);}
.btn:hover{background:var(--surface-2); border-color:var(--border-strong); transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-accent,.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn-accent:hover,.btn-primary:hover{background:var(--accent); filter:none; opacity:.92;}
.btn-secondary{background:var(--surface-2); color:var(--text);}
.btn-plus{width:42px; height:42px; min-height:42px; padding:0; border-radius:50%; font-size:1.3rem; line-height:1;}
.btn-plus svg{width:18px; height:18px;}

/* FormField: label on top, thin rounded input */
.field label{color:var(--text-muted); font-weight:500;}
input,select,textarea{background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--radius-sm); color:var(--text);}
input::placeholder,textarea::placeholder{color:var(--text-faint);}
input:focus,select:focus,textarea:focus{background:var(--input-bg); border-color:var(--accent);}

/* keyboard focus (accessibility) */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0;}

/* shell */
.sidebar{background:var(--surface); backdrop-filter:blur(6px);}
.bottom-nav{background:var(--surface-solid);}
.nav-btn.active{background:var(--accent-soft); border-color:transparent;}
.nav-btn.active .nav-ic,.bn-btn.active{color:var(--accent);}
.modal{background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-lg);}
.overlay{background:var(--overlay);}
.toast{background:var(--surface-solid); color:var(--text);}
.brand-mark-img{border-radius:50%;}

/* ---------------------------------------------------------------------
   Motion: cards rise in (fade + short slide-up, ~400ms, staggered),
   page content fades between screens (~200ms).
   --------------------------------------------------------------------- */
/* "backwards" (not "both"): after the animation ends the element returns to its normal transform, so hover-lift keeps working */
.reveal{animation:rise var(--dur-rise) var(--ease) backwards; animation-delay:calc(var(--i,0) * 100ms);}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
.page-enter{animation:page-fade var(--dur-page) ease-out backwards;}
@keyframes page-fade{from{opacity:0} to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .bg-waves svg,.reveal,.page-enter{animation:none !important;}
  .lift,.lift::after,.btn{transition:none !important;}
  .lift:hover,.btn:hover{transform:none;}
}
@media (max-width:880px){
  .page-head{padding:0 52px;}
  .page-head h1{font-size:1.25rem;}
  .bg-waves svg{width:620px;}
}