/*
 * オトノミカ — Design Tokens
 * 配色・タイポ・スペーシングの正典。新しい値を散らさず必ずここから参照する。
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Background scale */
  --ot-bg-deepest: #06070f;
  --ot-bg-base:    #0b0e1a;
  --ot-bg-inset:   #0e1322;
  --ot-card:       #121627;

  /* Borders */
  --ot-border:      #232a45;
  --ot-border-soft: #1c2238;
  --ot-border-neon: rgba(124,140,255,.18);

  /* Glass */
  --ot-glass-card: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  --ot-glass-soft: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  --ot-glass-blur: blur(10px);

  /* Text */
  --ot-text:     #e6e9f5;
  --ot-text-sub: #9aa3c0;
  --ot-text-dim: #7a83a6;
  --ot-ink:      #06070f;

  /* Neon accents */
  --ot-cyan:   #19E3FF;
  --ot-purple: #7B5BFF;
  --ot-pink:   #FF2EC4;

  --ot-grad-main: linear-gradient(135deg, #19E3FF, #7B5BFF);
  --ot-grad-trio: linear-gradient(105deg, #19E3FF, #7B5BFF 55%, #FF2EC4);
  --ot-grad-edge: linear-gradient(90deg, #19E3FF, #7B5BFF);

  --ot-glow-cyan:   rgba(25,227,255,.40);
  --ot-glow-purple: rgba(123,91,255,.35);
  --ot-glow-pink:   rgba(255,46,196,.35);

  /* Typography */
  --ot-font-jp: 'Noto Sans JP', system-ui, sans-serif;
  --ot-font-en: 'Space Grotesk', system-ui, sans-serif;

  --ot-fs-hero:    clamp(32px, 5.2vw, 58px);
  --ot-fs-h1:      clamp(24px, 3.4vw, 34px);
  --ot-fs-h2:      21px;
  --ot-fs-card:    16px;
  --ot-fs-body:    16px;
  --ot-fs-sub:     14px;
  --ot-fs-meta:    11.5px;
  --ot-lh-body:    2.0;
  --ot-lh-tight:   1.45;

  /* Radius */
  --ot-r-card: 14px;
  --ot-r-sm:   8px;
  --ot-r-pill: 100px;

  /* Spacing */
  --ot-gap-grid: 34px;
  --ot-pad-page: 24px;
  --ot-maxw:     1080px;

  /* Shadows */
  --ot-sh-card-hover: 0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(25,227,255,.16);
  --ot-sh-paper:      0 12px 40px rgba(0,0,0,.40);
}

/* scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ot-bg-deepest); }
::-webkit-scrollbar-thumb {
  background: var(--ot-grad-edge);
  border-radius: 10px;
  border: 3px solid var(--ot-bg-deepest);
}

::selection { background: rgba(25,227,255,.28); color: #fff; }