/* ═══ AiPreView Design Tokens ═══ */
:root{
  /* Palette — from WEBSITE_STRUCTURE.md */
  --paper:#F4EFE6;
  --ink:#1A1714;
  --accent:#F0652E;
  --line:#C9C0B2;
  --muted:#7D756A;
  --ink-soft:#3A342D;
  --dark:#161310;
  --risk:#B9422E;
  --pass:#3E6B4F;
  --warn:#B8892E;

  /* Typography */
  --serif:'Playfair Display','Noto Serif SC',Georgia,serif;
  --serif-cjk:'Noto Serif SC','Playfair Display',serif;
  --sans:'Inter','Noto Sans SC',system-ui,sans-serif;
  --sans-cjk:'Noto Sans SC','Inter',sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono','SF Mono','Menlo',monospace;

  /* Layout — navigation */
  --nav-h:78px;
  --nav-h-mobile:72px;

  /* Layout — spacing */
  --pad-x:clamp(32px,5vw,72px);
  --rail-x:48px;
  --rail-offset:calc(var(--rail-x) + 56px);
  --page-max:1500px;
  --content-max:1264px;
  --measure:760px;

  /* Layout — safe top to clear fixed header */
  --safe-top:calc(var(--nav-h) + clamp(32px,5vh,72px));

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --max-w:1500px;

  /* Shadows — minimal, blueprint style */
  --shadow-sm:0 1px 2px rgba(26,23,20,.04);
  --shadow-md:0 2px 8px rgba(26,23,20,.06);
}

/* Safe top for mobile */
@media (max-width:860px){
  :root{
    --nav-h:var(--nav-h-mobile);
    --safe-top:calc(var(--nav-h-mobile) + 28px);
    --pad-x:20px;
    --rail-x:20px;
    --rail-offset:20px;
  }
}

/* Paper texture + grain — from sac-ai.com source */
html,body{background:var(--paper);}
body{
  position:relative;
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(26,23,20,.02) 1px,transparent 1px);
  background-size:3px 3px;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}