/* ========================================================================
   LearningWithSruthi — Design tokens
   Source of truth; everything else reads from here.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Dosis:wght@300;400;500;600;700&family=Bitter:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Locked palette */
  --white:     #FFFFFF;
  --sage-l:    #D0D6B3;
  --sage:      #9BA06A;
  --sage-m:    #E4E8CC;
  --slate:     #525B76;
  --forest:    #143109;
  --bg:        #F6F5F1;
  --error:     #DC3545;
  --error-bg:  #FEF2F2;
  --success:   #2D6A30;
  --success-bg:#D1FAE5;

  /* Blue accent (secondary to green) */
  --blue:      #3C648F;
  --blue-d:    #2B4A6E;
  --blue-l:    #7C9BC2;
  --blue-bg:   #EAF0F7;

  /* Extended (derived, never overrides the locked tokens) */
  --cream:     #F5F1E8;
  --cream-2:   #EEF0E0;
  --ink:       var(--forest);
  --ink-2:     #2A3E1F;
  --muted:     #7C8172;
  --line:      rgba(20, 49, 9, 0.08);
  --line-2:    rgba(20, 49, 9, 0.14);

  /* Glass */
  --glass-bg:  rgba(255,255,255,0.62);
  --glass-bg-2:rgba(255,255,255,0.40);
  --glass-br:  rgba(255,255,255,0.55);
  --glass-sh:  0 1px 0 rgba(255,255,255,0.9) inset,
               0 12px 40px -12px rgba(20,49,9,0.18),
               0 2px 8px rgba(20,49,9,0.06);

  /* Type */
  --fh: 'Young Serif', 'Cormorant Garamond', Georgia, serif;
  --fp: 'Dosis', 'Trebuchet MS', system-ui, sans-serif;
  --fb: 'Bitter', Georgia, serif;

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

  /* Shadows */
  --shadow:    0 2px 12px rgba(20,49,9,0.06);
  --shadow-lg: 0 8px 32px rgba(82,91,118,0.15);
  --shadow-xl: 0 22px 60px -20px rgba(20,49,9,0.22);
}

/* Dark */
[data-theme="dark"] {
  --white:   #14170F;
  --sage-l:  #2B3320;
  --sage:    #A9B07A;
  --sage-m:  #1E2416;
  --slate:   #AEB5C8;
  --forest:  #E8EBDA;
  --bg:      #0E1108;
  --error:   #F47885;
  --error-bg:#3A1619;
  --success: #8DD690;
  --success-bg:#14291A;

  --blue:    #7FA3CE;
  --blue-d:  #A9C2E0;
  --blue-l:  #3C648F;
  --blue-bg: #16202E;

  --cream:   #F5F1E8;
  --cream-2: #1A1E13;
  --ink:     #E8EBDA;
  --ink-2:   #C6CCB3;
  --muted:   #9AA088;
  --line:    rgba(232,235,218,0.08);
  --line-2:  rgba(232,235,218,0.14);

  --glass-bg:  rgba(30,36,22,0.55);
  --glass-bg-2:rgba(30,36,22,0.38);
  --glass-br:  rgba(169,176,122,0.22);
  --glass-sh:  0 1px 0 rgba(255,255,255,0.04) inset,
               0 12px 40px -12px rgba(0,0,0,0.55),
               0 2px 8px rgba(0,0,0,0.35);
  --shadow:    0 2px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-xl: 0 22px 60px -20px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fp);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","cv11";
}

h1,h2,h3,h4 { font-family: var(--fh); color: var(--forest); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 2.1rem; line-height: 1.12; }
h2 { font-size: 1.5rem; line-height: 1.2; }
h3 { font-size: 1.18rem; line-height: 1.25; }
.t-body  { font-family: var(--fp); font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); }
.t-label { font-family: var(--fb); font-size: 0.82rem; color: var(--slate); letter-spacing: 0.02em; }
.t-small { font-family: var(--fp); font-size: 0.82rem; color: var(--muted); }
.t-mono  { font-family: var(--fb); font-variant-numeric: tabular-nums; }

/* ---------- Soft neutral backdrop (off-white, faint blue+green accents) ---------- */
.lws-backdrop {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 10% -12%, color-mix(in oklab, var(--blue) 9%, transparent) 0%, transparent 60%),
    radial-gradient(900px 520px at 110% 4%, color-mix(in oklab, var(--sage) 10%, transparent) 0%, transparent 55%),
    var(--bg);
}
.lws-backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.14  0 0 0 0 0.18  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .3; mix-blend-mode: multiply;
}
[data-theme="dark"] .lws-backdrop::before { mix-blend-mode: screen; opacity: .25; }

/* ---------- Glass ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-br);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: var(--glass-sh);
}
.glass-soft {
  background: var(--glass-bg-2);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--sage-l);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card-flat {
  background: var(--white);
  border: 1px solid var(--sage-l);
  border-radius: var(--r-md);
  padding: 20px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.card-title { font-family: var(--fh); font-size: 1.18rem; color: var(--forest); text-transform: capitalize; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--fp); font-weight: 600; letter-spacing: 0.01em;
  border-radius: var(--r-pill); padding: 10px 18px; font-size: 0.95rem;
  border: 1px solid transparent; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px; transition: transform .15s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  text-decoration: none; line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--sage); color: #fff; }
.btn-primary:hover { background: var(--forest); }
.btn-dark    { background: linear-gradient(135deg, var(--slate), var(--forest)); color: #fff; }
.btn-secondary { background: var(--white); color: var(--forest); border-color: var(--sage-l); }
.btn-secondary:hover { background: var(--sage-m); }
.btn-ghost { background: transparent; color: var(--sage); }
.btn-ghost:hover { background: var(--sage-m); color: var(--forest); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn-lg { padding: 14px 22px; font-size: 1.02rem; }
.btn-icon { padding: 8px; border-radius: 10px; }

/* ---------- Badges ---------- */
.badge {
  font-family: var(--fp); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); display: inline-flex;
  align-items: center; gap: 6px; border: 1px solid transparent;
}
.badge-math    { background: var(--slate); color: #fff; }
.badge-english { background: var(--sage);  color: #fff; }
.badge-full    { background: linear-gradient(135deg, var(--slate), var(--forest)); color: #fff; }
.badge-topic   { background: var(--sage-m); color: var(--forest); border-color: var(--sage-l); }
.badge-free    { background: #FEF3CD; color: #856404; }
[data-theme="dark"] .badge-free { background: #3B2F10; color: #F1C35C; }
.badge-status  { background: var(--sage-m); color: var(--forest); }
.badge-due     { background: var(--error-bg); color: var(--error); }
.badge-ok      { background: var(--success-bg); color: var(--success); }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  font-family: var(--fp); font-size: 0.98rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--sage-l);
  border-radius: var(--r-md); padding: 10px 14px; width: 100%;
  outline: none; transition: border-color .18s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--sage); }

/* ---------- Tabs ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--white); border: 1px solid var(--sage-l); border-radius: var(--r-pill); }
.tab  { font-family: var(--fp); font-weight: 600; font-size: 0.88rem; color: var(--slate); padding: 7px 14px; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer; }
.tab.active { background: var(--sage); color: #fff; }

/* ---------- Progress ---------- */
.progress { height: 8px; background: var(--sage-l); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), var(--slate)); border-radius: 99px; }

/* ---------- Highlight / info ---------- */
.highlight { background: var(--sage-m); border: 1px solid var(--sage-l); border-radius: var(--r-md); padding: 14px 16px; }
.info      { background: linear-gradient(135deg, var(--sage-l), var(--sage)); color: var(--forest); border-radius: var(--r-md); padding: 14px 16px; }
.alert-error { background: var(--error-bg); color: var(--error); border: 1px solid #fca5a5; border-radius: var(--r-sm); padding: 12px 14px; }

/* ---------- Animation ---------- */
@keyframes fade-up { from { transform: translateY(6px);} to { transform: none;} }
/* Animation only translates Y, never controls opacity — content is always visible. */
.fade-in { opacity: 1 !important; animation: fade-up .45s ease both; }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* Scroll */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sage-l); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Utility */
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sr { position: absolute; width:1px; height:1px; overflow: hidden; clip: rect(0 0 0 0); }
.divider { height: 1px; background: var(--line); margin: 14px 0; border: 0; }