/* ikii — design tokens and primitives.
   Import once, globally. Use these values verbatim; do not invent new ones.
   Font: Fredoka (500/600/700) + DM Mono (400/500), Google Fonts. */

:root {
  /* brand */
  --ikii-coral:      #FB6340;
  --ikii-coral-deep: #D64A2B;
  --ikii-coral-tint: #FFE3DA;

  /* subject accents — content labels only, never buttons */
  --ikii-math:      #4C82D9;  --ikii-math-deep:     #3A66AE;
  --ikii-ela:       #38C08C;  --ikii-ela-deep:      #2A9970;
  --ikii-language:  #F2C044;  --ikii-language-deep: #C99A2B;
  --ikii-science:   #A874E6;  --ikii-science-deep:  #8654BE;
  --ikii-teal:      #2FB8C6;  --ikii-teal-deep:     #1E8F9B;

  /* warm neutrals — never cool grey */
  --ikii-ink:        #1B1A24;
  --ikii-ink-deep:   #0F0E15;
  --ikii-ink-raised: #2A2836;
  --ikii-slate:      #57525F;
  --ikii-muted:      #86818F;
  --ikii-line:       #E4DFD4;
  --ikii-sand:       #F4F1EA;
  --ikii-paper:      #FFFDF8;

  /* radius */
  --ikii-r-pill: 999px;
  --ikii-r-tile: 30px;
  --ikii-r-card: 24px;
  --ikii-r-sm:   16px;
  --ikii-r-input:12px;

  /* the one shadow language: solid, never blurred */
  --ikii-lift-1: 0 4px 0;
  --ikii-lift-2: 0 6px 0;
  --ikii-lift-3: 0 8px 0;

  --ikii-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
}

[data-theme="ikii"] body {
  margin: 0;
  background: var(--ikii-sand);
  color: var(--ikii-ink);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
[data-theme="ikii"] h1, [data-theme="ikii"] h2, [data-theme="ikii"] h3 { font-weight: 600; letter-spacing: -0.025em; margin: 0; }
[data-theme="ikii"] h1 { font-size: 66px; line-height: 1.03; letter-spacing: -0.035em; }
[data-theme="ikii"] h2 { font-size: 36px; }
[data-theme="ikii"] h3 { font-size: 22px; }
[data-theme="ikii"] a { color: var(--ikii-coral-deep); }
[data-theme="ikii"] a:hover { color: var(--ikii-coral); }

.ikii-mono {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ikii-muted);
}

/* ---------- button ---------- */
.ikii-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 17px/1 'Fredoka', sans-serif;
  padding: 17px 30px; border: 0; cursor: pointer;
  border-radius: var(--ikii-r-pill);
  background: var(--ikii-coral); color: var(--ikii-paper);
  box-shadow: var(--ikii-lift-1) var(--ikii-coral-deep);
  transition: transform 90ms linear, box-shadow 90ms linear;
}
.ikii-btn:hover  { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ikii-coral-deep); }
.ikii-btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 var(--ikii-coral-deep); }
.ikii-btn:focus-visible { outline: 2px solid var(--ikii-coral); outline-offset: 2px; }

.ikii-btn--secondary {
  background: var(--ikii-paper); color: var(--ikii-slate);
  box-shadow: var(--ikii-lift-1) var(--ikii-line);
}
.ikii-btn--secondary:hover  { box-shadow: 0 5px 0 var(--ikii-line); }
.ikii-btn--secondary:active { box-shadow: 0 1px 0 var(--ikii-line); }

.ikii-btn--dark {
  background: var(--ikii-ink); color: var(--ikii-paper);
  box-shadow: var(--ikii-lift-1) var(--ikii-ink-deep);
}
.ikii-btn--block { display: flex; width: 100%; padding: 19px; }

/* ---------- chips ---------- */
.ikii-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px/1 'Fredoka', sans-serif;
  padding: 12px 20px; border-radius: var(--ikii-r-pill);
  background: var(--ikii-sand); color: var(--ikii-slate);
}
.ikii-chip--soft   { background: var(--ikii-coral-tint); color: var(--ikii-coral-deep); font-weight: 600; }
.ikii-chip--active { background: var(--ikii-ink); color: var(--ikii-paper); font-weight: 600;
                     box-shadow: var(--ikii-lift-1) var(--ikii-ink-deep); }

/* ---------- card ---------- */
.ikii-card {
  background: var(--ikii-paper);
  border: 1px solid var(--ikii-line);
  border-radius: var(--ikii-r-card);
  padding: 28px;
}
.ikii-card--raised { box-shadow: var(--ikii-lift-2) var(--ikii-line); }

/* ---------- game tile ---------- */
.ikii-tile {
  border-radius: var(--ikii-r-tile);
  padding: 18px; min-height: 164px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ikii-paper);
  transition: transform 120ms var(--ikii-ease), box-shadow 120ms var(--ikii-ease);
}
.ikii-tile:active { transform: translateY(3px) rotate(0deg) !important; }
.ikii-tile__name { font: 600 19px/1.2 'Fredoka', sans-serif; }
.ikii-tile__meta { font: 400 11px/1 'DM Mono', monospace; opacity: 0.8; }
/* subject variants — apply one */
.ikii-tile--math     { background: var(--ikii-math);     box-shadow: var(--ikii-lift-2) var(--ikii-math-deep); }
.ikii-tile--ela      { background: var(--ikii-ela);      box-shadow: var(--ikii-lift-2) var(--ikii-ela-deep); }
.ikii-tile--language { background: var(--ikii-language); box-shadow: var(--ikii-lift-2) var(--ikii-language-deep); color: #4a340a; }
.ikii-tile--science  { background: var(--ikii-science);  box-shadow: var(--ikii-lift-2) var(--ikii-science-deep); }
.ikii-tile--dark     { background: var(--ikii-ink);      box-shadow: var(--ikii-lift-2) var(--ikii-ink-deep); }
.ikii-tile--locked   { background: var(--ikii-line); color: var(--ikii-muted); box-shadow: none; cursor: default; }
/* physicality: alternate these on a grid via :nth-child */
.ikii-tile:nth-child(odd)  { transform: rotate(-0.7deg); }
.ikii-tile:nth-child(even) { transform: rotate(0.7deg); }

/* ---------- input ---------- */
.ikii-input {
  height: 48px; padding: 0 18px;
  font: 500 17px/1 'Fredoka', sans-serif; color: var(--ikii-ink);
  background: var(--ikii-paper);
  border: 2px solid var(--ikii-line); border-radius: var(--ikii-r-input);
}
.ikii-input:focus { outline: none; border-color: var(--ikii-coral); }

/* ---------- progress ---------- */
.ikii-track { height: 12px; border-radius: var(--ikii-r-pill); background: var(--ikii-line); overflow: hidden; }
.ikii-track > * { height: 100%; border-radius: var(--ikii-r-pill); background: var(--ikii-coral); }

/* ---------- floating tab bar ---------- */
.ikii-tabs {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px;
  background: var(--ikii-paper); border-radius: var(--ikii-r-pill);
  box-shadow: 0 5px 0 var(--ikii-line);
}
.ikii-tabs__item        { display: flex; align-items: center; gap: 8px; padding: 11px 18px;
                          border-radius: var(--ikii-r-pill); font: 500 15px/1 'Fredoka', sans-serif; color: var(--ikii-muted); }
.ikii-tabs__item--active{ background: var(--ikii-coral); color: var(--ikii-paper); font-weight: 600; padding: 11px 20px; }

/* ---------- dark band ---------- */
.ikii-dark { background: var(--ikii-ink); color: var(--ikii-paper); }
.ikii-dark .ikii-card { background: var(--ikii-ink-raised); border: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="ikii"] * { transition: none !important; animation: none !important; }
}