/* ============================================================================
   Penguin Empire Robotics 2551 — Tutorial Site
   brand.css · design tokens, reset, base typography, core UI
   Palette (from the official Branding Guide):
     Black #191919 · Gray #595959 · White #EDEDED · Ice Blue #92DCE5 · Ocean Blue #00AED6
   ============================================================================ */

:root {
  /* --- Raw brand palette --- */
  --ink:        #191919;  /* Black #19  */
  --gray:       #595959;  /* Gray #59   */
  --paper:      #ededed;  /* White #ED  */
  --ice:        #92dce5;  /* Ice Blue   */
  --ocean:      #00aed6;  /* Ocean Blue */
  --white:      #ffffff;

  /* --- Derived ink shades --- */
  --ink-900: #111314;
  --ink-800: #191c1d;
  --ink-700: #23282a;
  --ink-600: #2f3537;
  --ink-500: #3c4346;

  /* --- Derived neutrals (cool-tinted grays toward ice) --- */
  --slate-700: #41494c;
  --slate-600: #595f63;   /* ~ brand gray */
  --slate-500: #767d82;
  --slate-400: #9aa2a7;
  --slate-300: #c2c9cd;
  --slate-200: #dde3e6;
  --slate-100: #eaeef0;
  --slate-50:  #f4f7f8;

  /* --- Ocean ramp (for accents + AA-contrast text on light) --- */
  --ocean-300: #7fe0f1;
  --ocean-400: #34c8e8;
  --ocean-500: #00aed6;   /* brand ocean */
  --ocean-600: #0292b6;
  --ocean-700: #06768f;   /* text-on-white safe */
  --ocean-800: #0a5d70;
  --ocean-900: #0c3f4d;

  /* --- Ice ramp --- */
  --ice-50:  #f1fbfd;
  --ice-100: #e2f6f9;
  --ice-200: #cdeff4;
  --ice-300: #aee6ed;
  --ice-400: #92dce5;     /* brand ice */
  --ice-500: #6fcdd9;

  /* --- Semantic surfaces (light reading theme) --- */
  --bg:            var(--ice-50);     /* page background, faint ice tint */
  --bg-tint:       var(--ice-100);
  --surface:       var(--white);      /* elevated cards */
  --surface-2:     var(--slate-50);   /* nested panels */
  --surface-sunken:var(--slate-100);

  /* --- Text --- */
  --text:        #1b2023;
  --text-soft:   #495056;
  --text-muted:  #6b7378;
  --text-invert: #f3f7f8;
  --link:        var(--ocean-700);
  --link-hover:  var(--ocean-800);

  /* --- Borders / lines --- */
  --line:        #dbe3e6;
  --line-strong: #c5cfd3;
  --ring:        color-mix(in srgb, var(--ocean) 55%, transparent);

  /* --- Feedback colors --- */
  --good:    #1f9d6b;
  --good-bg: #e7f7ef;
  --bad:     #d6453d;
  --bad-bg:  #fbeae8;
  --warn:    #c9842a;
  --warn-bg: #fcf2e1;

  /* --- Code surface (dark) --- */
  --code-bg:     #12161a;
  --code-bg-2:   #171c21;
  --code-line:   #232c33;
  --code-text:   #d6e2e8;
  --code-dim:    #7c8a92;

  /* --- Typography --- */
  --font-display: "Aldrich", "Segoe UI", system-ui, sans-serif;
  --font-accent:  "Russo One", "Aldrich", sans-serif;
  --font-body:    "Calibri", "Carlito", "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas,
                  "Liberation Mono", Menlo, monospace;

  /* --- Spacing scale --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-12: 96px;

  /* --- Radii --- */
  --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* --- Layered, ocean-tinted shadows --- */
  --shadow-sm: 0 1px 2px rgba(12,63,77,.06), 0 1px 1px rgba(12,63,77,.04);
  --shadow-md: 0 4px 10px -2px rgba(12,63,77,.10), 0 2px 4px -2px rgba(12,63,77,.07);
  --shadow-lg: 0 14px 34px -8px rgba(12,63,77,.18), 0 6px 12px -6px rgba(12,63,77,.10);
  --shadow-xl: 0 30px 60px -16px rgba(10,93,112,.30), 0 10px 24px -12px rgba(12,63,77,.18);
  --shadow-ocean: 0 10px 30px -8px rgba(0,174,214,.45);

  /* --- Motion (spring-ish) --- */
  --ease-spring: cubic-bezier(.22,1,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --t-fast: 130ms; --t-med: 220ms; --t-slow: 380ms;

  /* Opt in to interpolating keyword sizes (auto) so <details> panels can
     animate their height. Progressive: unsupported browsers open instantly. */
  interpolate-size: allow-keywords;

  /* --- Layout --- */
  --header-h: 64px;
  --sidebar-w: 312px;
  --content-max: 860px;
  --wide-max: 1240px;
}

/* ---------------------------------------------------------------- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--ocean); color: #fff; }

/* ----------------------------------------------------------- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); letter-spacing: -0.02em; }
h3 { font-size: 1.28rem; letter-spacing: -0.01em; }
h4 { font-size: 1.06rem; }
p { max-width: 70ch; }
strong { font-weight: 700; color: var(--ink); }
small { font-size: .82em; }
code, kbd, samp { font-family: var(--font-mono); font-size: .92em; }

/* inline code */
:not(pre) > code {
  background: var(--ice-100);
  color: var(--ocean-800);
  padding: .12em .42em;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ocean) 18%, transparent);
  font-size: .86em;
  font-weight: 500;
  /* Not `nowrap`: a long snippet quoted inline (a full constructor call, say)
     pushed the whole page wider than a phone viewport. Normal wrapping breaks
     at spaces, so short tokens like motor.set(0.7) still stay in one piece,
     and break-word is the backstop for a single token too long to fit. */
  overflow-wrap: break-word;
}

kbd {
  background: var(--white); border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 6px; padding: .1em .45em;
  font-size: .8em; color: var(--ink); box-shadow: var(--shadow-sm);
}

mark { background: linear-gradient(120deg, transparent 0, var(--ice-200) 0); color: inherit; padding: 0 .12em; }

/* -------------------------------------------------------------- Buttons --- */
.btn {
  --btn-bg: var(--ocean-600); --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-size: .96rem; letter-spacing: .01em;
  padding: .72em 1.25em; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-med) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--ocean-700); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: linear-gradient(180deg, var(--ocean-400), var(--ocean-600)); box-shadow: var(--shadow-ocean); }
.btn--primary:hover { background: linear-gradient(180deg, var(--ocean-500), var(--ocean-700)); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ocean-800);
  border-color: var(--line-strong); box-shadow: none;
}
.btn--ghost:hover { background: var(--white); color: var(--ocean-800); border-color: var(--ocean-400); }
.btn--dark { --btn-bg: var(--ink-800); }
.btn--dark:hover { background: var(--ink-900); }
.btn--sm { padding: .5em .9em; font-size: .85rem; }
.btn--lg { padding: .85em 1.6em; font-size: 1.05rem; }

/* --------------------------------------------------------------- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .34em .7em; border-radius: var(--r-pill);
  background: var(--ice-100); color: var(--ocean-800);
  border: 1px solid color-mix(in srgb, var(--ocean) 22%, transparent);
}
.badge--ocean { background: var(--ocean-600); color: #fff; border-color: transparent; }
.badge--ink   { background: var(--ink-800); color: var(--ice-300); border-color: transparent; }
.badge--good  { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.badge--warn  { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.badge--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }

/* ----------------------------------------------------------- Utilities --- */
.u-mono { font-family: var(--font-mono); }
.u-display { font-family: var(--font-display); }
.u-muted { color: var(--text-muted); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-hide { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.container { width: 100%; max-width: var(--wide-max); margin-inline: auto; padding-inline: var(--s-6); }

/* skip link */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--ink); color: #fff; padding: .6em 1em; border-radius: var(--r-sm);
  transform: translateY(-160%); transition: transform var(--t-med) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: #fff; }