/* ============================================================
   FILE: /css/core.css
   PURPOSE: Reset + typography + variables
   - Restores clean WHITE background (no ivory)
   - Adds subtle “light texture” via faint gradient (optional)
   ============================================================ */

/* ============================================================
   1) DESIGN TOKENS
   ============================================================ */
:root{
  /* Colors (WHITE base) */
  --bg: #ffffff;          /* <- white */
  --surface: #f7f8fa;     /* <- neutral light gray */
  --text: #101828;
  --muted: #475467;
  --border: #e4e7ec;

  /* Accent */
  --accent: #2563eb;
  --accent-ink: #ffffff;

  /* Focus ring helper */
  --ring: color-mix(in srgb, var(--accent) 18%, transparent);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji","Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 2.5vw, 2.75rem);

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Radius */
  --radius: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.10);
  --shadow-md: 0 14px 40px rgba(16,24,40,.14);
  --shadow-lg: 0 22px 64px rgba(16,24,40,.18);

  /* Content width */
  --content: 1120px;
}

/* ============================================================
   2) RESET
   ============================================================ */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body{ margin: 0; }

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

button, input, textarea, select{
  font: inherit;
  color: inherit;
}

button{ cursor: pointer; }

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

a:hover{ text-decoration: underline; }

:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 2px;
}

/* ============================================================
   3) BASE TYPOGRAPHY + “CLEAN ZUSH”
   ============================================================ */
body{
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);

  /* WHITE background (no ivory) */
  background: var(--bg);

  /* OPTIONAL: subtle light texture (very faint) */
  background-image:
    radial-gradient(900px 500px at 15% 0%, rgba(37,99,235,.04), transparent 60%),
    radial-gradient(700px 420px at 95% 10%, rgba(16,24,40,.03), transparent 55%);
  background-repeat: no-repeat;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p{
  margin: 0 0 var(--s-4);
  color: var(--text);
}

small{
  font-size: var(--text-sm);
  color: var(--muted);
}

h1,h2,h3,h4{
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
}

h1{ font-size: var(--text-3xl); }
h2{ font-size: var(--text-2xl); }
h3{ font-size: var(--text-xl); }
h4{ font-size: var(--text-lg); }

ul,ol{
  margin: 0 0 var(--s-4);
  padding-left: 1.25rem;
}

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

/* ============================================================
   4) ACCESSIBILITY UTILITY
   ============================================================ */
.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;
}