/* =====================================================================
   global.css — PUDELVERSE Baseline (Mobile-first)
   - RESET + BASE + TOKENS + Accessibility + Cross-browser smoothing
   - Policy:
     - Mobile-first
     - 2 breakpoints: 768 (tablet), 1024 (desktop)
     - Flex/Grid only (legacy layouts not supported)
     - Keep page-specific effects out of here
   ===================================================================== */

/* -----------------------------
   0) Reset (browser defaults)
   ----------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: transparent; border: 0; padding: 0; }

ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

table { border-collapse: collapse; border-spacing: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Focus & selection */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: rgba(255,255,255,.16); }

/* Prevent iOS text auto zoom / keep stable typography */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* -----------------------------
   1) Tokens (SSOT for CSS)
   ----------------------------- */
:root{
  /* Breakpoint policy (documented) */
  /* tablet: 768px, desktop: 1024px */

  /* Layout */
  --container: 1100px;      /* max content width */
  --px: 16px;               /* side padding (mobile) */
  --gap: 16px;              /* base gap */
  --radius: 16px;

  /* Typography */
  --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs: 15px;               /* base font size (mobile) */
  --lh: 1.55;               /* base line height */
  --h1: 28px;
  --h2: 22px;
  --h3: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Color (defaults: dark) */
  --bg: #050506;
  --fg: #f2f2f2;
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.58);

  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);

  --shadow: 0 22px 80px rgba(0,0,0,.35);

  /* Interaction */
  --focus: rgba(255,255,255,.85);
  --tap: transparent;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 160ms;

  /* Z */
  --z-header: 50;
  --z-popover: 80;
  --z-modal: 100;

  /* Spacing scale (use these instead of random px) */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;
  --s-8: 60px;
}

/* Light mode tokens (auto if you use data-theme="light") */
html[data-theme="light"]{
  --bg: #ffffff;
  --fg: #101114;
  --muted: rgba(0,0,0,.66);
  --muted2: rgba(0,0,0,.52);

  --line: rgba(0,0,0,.10);
  --line2: rgba(0,0,0,.14);

  --card: rgba(0,0,0,.04);
  --card2: rgba(0,0,0,.06);

  --shadow: 0 22px 80px rgba(0,0,0,.14);

  --focus: rgba(0,0,0,.85);
  ::selection { background: rgba(0,0,0,.12); }
}

/* -----------------------------
   2) Base document rules
   ----------------------------- */
body{
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Make tap interactions nicer on mobile */
a, button { -webkit-tap-highlight-color: var(--tap); }

/* Better default for long text + links */
p { margin: 0; }
small { font-size: .86em; color: var(--muted); }
b, strong { font-weight: 800; }

/* Headings (opt-in classes preferred, but safe defaults) */
h1, h2, h3 { margin: 0; line-height: 1.18; letter-spacing: .01em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

/* Code */
code, pre { font-family: var(--mono); }
pre{
  margin: 0;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  padding: 14px;
}
html[data-theme="light"] pre{ background: rgba(0,0,0,.04); }

/* Form fields baseline */
input, textarea, select{
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  outline: none;
}
input::placeholder, textarea::placeholder{ color: var(--muted2); }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* -----------------------------
   3) Breakpoints (policy-fixed)
   ----------------------------- */
@media (min-width: 768px){
  :root{
    --px: 22px;
    --gap: 18px;
    --fs: 16px;
    --h1: 34px;
    --h2: 26px;
    --h3: 20px;
  }
}

@media (min-width: 1024px){
  :root{
    --px: 28px;
    --gap: 20px;
    --fs: 16px;
    --h1: 36px;
    --h2: 28px;
    --h3: 20px;
  }
}


.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}