/* ================================================================
   PlanIt — app.css  |  Design Tokens + Root
   Aesthetic: Dark-first, editorial, geometric accent system
   Fonts: Syne (display) + DM Sans (body)
   ================================================================ */

/* ── Google Fonts fallback (loaded in HTML) ─────────────────── */
:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Colour Palette (dark theme) ── */
  --clr-bg:          #0d1117;
  --clr-bg-2:        #161b22;
  --clr-bg-3:        #1c2333;
  --clr-surface:     #21262d;
  --clr-surface-2:   #2a3142;
  --clr-border:      #30363d;
  --clr-border-2:    #3d444d;

  --clr-text:        #e6edf3;
  --clr-text-2:      #8b949e;
  --clr-text-3:      #6e7681;

  --clr-accent:      #f7b731;       /* amber — primary action */
  --clr-accent-dim:  #c49328;
  --clr-accent-glow: rgba(247,183,49,0.18);

  --clr-blue:        #58a6ff;
  --clr-green:       #3fb950;
  --clr-red:         #f85149;
  --clr-purple:      #bc8cff;
  --clr-teal:        #39c5cf;

  --clr-success:     #3fb950;
  --clr-warn:        #f7b731;
  --clr-error:       #f85149;
  --clr-info:        #58a6ff;

  /* ── Typography scale ── */
  --text-xs:   0.72rem;
  --text-sm:   0.85rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.35rem;
  --text-xl:   1.65rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.5rem;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.6;
  --lh-loose:  1.8;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Radii ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.55);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.65);
  --shadow-accent: 0 0 0 1px var(--clr-accent), 0 4px 20px var(--clr-accent-glow);

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;

  /* ── Layout ── */
  --header-h:      60px;
  --summary-bar-h: 52px;
  --plan-footer-h: 72px;
  --content-max:   1200px;
  --sidebar-w:     280px;
  --card-min:      280px;
}

/* ── Light Theme Overrides ───────────────────────────────────── */
[data-theme="light"] {
  --clr-bg:        #f6f8fa;
  --clr-bg-2:      #ffffff;
  --clr-bg-3:      #eaeef2;
  --clr-surface:   #ffffff;
  --clr-surface-2: #f0f3f6;
  --clr-border:    #d0d7de;
  --clr-border-2:  #b8c0c9;
  --clr-text:      #1f2328;
  --clr-text-2:    #57606a;
  --clr-text-3:    #8c959f;
  --clr-accent:    #c9860a;
  --clr-accent-dim:#a36d07;
  --clr-accent-glow: rgba(201,134,10,0.15);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.15);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--clr-text);
  background: var(--clr-bg);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out);
}

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--clr-text);
}

h1 { font-size: var(--text-3xl); font-weight: var(--fw-black); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { line-height: var(--lh-base); color: var(--clr-text-2); }

a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

em { font-style: italic; color: var(--clr-accent); }

strong { font-weight: var(--fw-semi); color: var(--clr-text); }

/* ── Utility classes ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
.text-accent { color: var(--clr-accent); }
.text-muted  { color: var(--clr-text-2); }
.text-dim    { color: var(--clr-text-3); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.fw-bold     { font-weight: var(--fw-bold); }
.fw-medium   { font-weight: var(--fw-medium); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-border-2); }

/* ── Selection ─────────────────────────────────────────────────── */
::selection { background: var(--clr-accent-glow); color: var(--clr-accent); }

/* ── Focus visible ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Loading shimmer ─────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--clr-surface) 25%,
    var(--clr-surface-2) 50%,
    var(--clr-surface) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}

/* ── Fade-in animation ──────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn var(--dur-slow) var(--ease-out) both;
}

/* ── Spin animation ─────────────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin { animation: spin 0.8s linear infinite; }

/* ── Pulse animation ─────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.pulse { animation: pulse 1.5s ease-in-out infinite; }