/* ===============================
   Puzzle Lab – Base (default.css)
   Tokens, palette, reset, layout
   =============================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/* ---- Tokens ---- */
:root{
  /* Neutrals */
  --bg:#f9f9f9; --surface:#fff;
  --text:#222; --text-muted:#667085;
  --border:#e6e6e6;

  /* Fonts */
  --font-body:'Poppins',sans-serif;
  --font-ui:'Quicksand',sans-serif;

  /* Radii */
  --radius-sm:8px; --radius-md:14px; --radius-lg:18px;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px;

  /* Accent defaults (theme overrides hue only) */
  --accent-hue:220; /* HSL fallback */
  --accent-h:220;   /* OKLCH hue */
  --accent-L:0.72;  /* perceived lightness */
  --accent-C:0.17;  /* chroma */
}

/* ---- Derived palette ---- */
:root{
  --accent:     oklch(var(--accent-L) var(--accent-C) var(--accent-h));
  --accent-900: oklch(calc(var(--accent-L) - 0.22) var(--accent-C) var(--accent-h));
  --accent-700: oklch(calc(var(--accent-L) - 0.12) var(--accent-C) var(--accent-h));
  --accent-500: var(--accent);
  --accent-300: oklch(calc(var(--accent-L) + 0.10) var(--accent-C) var(--accent-h));
  --accent-100: oklch(calc(var(--accent-L) + 0.20) var(--accent-C) var(--accent-h));

  --on-accent:#fff; --on-surface:var(--text);
}

/* Fallbacks for older browsers */
@supports not (color: oklch(50% 0.2 180)) {
  :root{
    --accent: hsl(var(--accent-hue) 85% 52%);
    --accent-900: hsl(var(--accent-hue) 85% 35%);
    --accent-700: hsl(var(--accent-hue) 85% 42%);
    --accent-500: hsl(var(--accent-hue) 85% 52%);
    --accent-300: hsl(var(--accent-hue) 85% 70%);
    --accent-100: hsl(var(--accent-hue) 85% 95%);
  }
}

/* ---- Reset / base ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit}

/* ---- Header & Nav ---- */
header{
  background:var(--surface);
  padding:12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
header .logo img{max-width:160px; height:auto;}
.header-actions{display:flex; align-items:center; gap:12px;}
.profile-icon{font-size:22px; text-decoration:none; color:var(--text);}
.profile-icon:hover{color:var(--accent-700);}
.menu-toggle{font-size:26px; background:none; border:none; cursor:pointer; color:var(--text);}

nav{background:var(--accent-700); display:none;}
nav.active{display:block;}
nav ul{list-style:none; display:flex; flex-direction:column;}
nav ul li{border-bottom:1px solid color-mix(in oklch, var(--accent-700), white 25%);}
nav ul li:last-child{border-bottom:none;}
nav ul li a{
  display:block; padding:14px; text-align:center; text-decoration:none;
  color:#fff; font-family:var(--font-ui); font-weight:600; font-size:18px;
  transition:background .25s ease, transform .05s ease;
}
nav ul li a:hover, nav ul li a:active{
  background:var(--accent-900); transform:translateY(0.5px);
}

/* ---- Main ---- */
main{padding:var(--space-5);}

/* ---- Utilities ---- */
.mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);}