/* Aquaring Design System — トークン（色・タイプ・角丸・影・スペース）
 *
 * 出典: Aquaring Design System/colors_and_type.css の :root を**そのまま**写したもの。
 * 値を変えない。デザインシステム側が更新されたら、この :root を差し替える。
 * ここに無いもの（@font-face の AQUARING Sans、@apply、Google Fonts の @import）は
 * 意図して外してある:
 *   - AQUARING Sans は固有のロゴ用書体で、台帳の UI には使わない（DS の README が
 *     「ブランド／ロゴタイプ専用」と明記）。配信物にも含めない。
 *   - @apply は Tailwind 専用で、素の CSS では黙って無視される。
 *   - フォントは index.html の <link> で読む（@import は読み込みが直列になり遅い）。
 */

:root {
  /* ======== Typography ======== */
  --font-jp:       "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-latin:    "Mulish", "Gilroy", "Helvetica Neue", Arial, sans-serif;
  --font-display:  "AQUARING Sans", "Mulish", Arial, sans-serif;
  --font-heading-jp: "Yu Gothic", "游ゴシック", "Noto Sans JP", sans-serif;

  /* Base scale — derived from Figma usage counts.
     Base body = 16 / 1.75 line-height, +0.02em tracking. */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-80: 80px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;   /* h1/h2 JP */
  --lh-body:  1.75;   /* body JP — Aquaring uses this everywhere */
  --lh-eyebrow: 1.5;  /* latin eyebrow */

  --tracking-default: 0.02em;
  --tracking-eyebrow: 0.16em;
  --tracking-caps:    0.26em;

  /* ======== Colors ======== */

  /* -- Ink / neutrals (monochrome is the core palette) -- */
  --ink-900:   rgb(21, 21, 21);     /* #151515 — primary text & UI ink    */
  --ink-800:   rgb(34, 34, 34);     /* #222222 — dark fill                 */
  --ink-700:   rgb(40, 45, 51);     /* stroke ink                          */
  --ink-600:   rgb(102, 102, 102);  /* #666666 — secondary text            */
  --ink-500:   rgb(153, 153, 153);  /* tertiary text                       */
  --ink-400:   rgb(170, 170, 170);  /* disabled text                       */
  --ink-300:   rgb(187, 188, 190);  /* subtle divider                      */
  --ink-200:   rgb(221, 221, 221);  /* hairline / border                   */
  --ink-100:   rgb(248, 248, 248);  /* #F8F8F8 — page background           */
  --ink-0:     rgb(255, 255, 255);  /* surface                             */

  /* Ink opacity tokens (used heavily over imagery / hover) */
  --ink-03:  rgba(21, 21, 21, 0.03);
  --ink-05:  rgba(21, 21, 21, 0.05);
  --ink-15:  rgba(21, 21, 21, 0.15);
  --ink-30:  rgba(21, 21, 21, 0.30);
  --ink-60:  rgba(21, 21, 21, 0.60);

  /* -- Signature Accent: Aqua (sky) -- */
  --aqua-500: rgb(128, 204, 249);   /* #80CCF9 — primary CTA/ribbon color  */
  --aqua-400: rgb(139, 205, 251);
  --aqua-300: rgb(114, 203, 255);   /* hero menu pill (50% alpha)          */
  --aqua-600: rgb(0, 162, 222);     /* deeper accent                       */

  /* -- Navy (corporate / case-study accents) -- */
  --navy-700: rgb(5, 58, 121);
  --navy-600: rgb(9, 50, 143);
  --navy-500: rgb(15, 34, 139);
  --navy-400: rgb(26, 64, 147);

  /* -- Alert red (used sparingly for error states / banners) -- */
  --red-500:  rgb(230, 47, 56);
  --red-600:  rgb(213, 20, 45);
  --red-700:  rgb(183, 25, 63);

  /* -- Brand greens / yellows (awards, misc) -- */
  --green-500: rgb(110, 176, 48);

  /* ======== Semantic color roles ======== */
  --bg:           var(--ink-100);
  --bg-surface:   var(--ink-0);
  --bg-subtle:    var(--ink-03);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-on-accent: var(--ink-900);   /* aqua is light — ink stays dark */
  --fg-on-dark:   var(--ink-0);

  --border:       var(--ink-15);
  --border-hair:  rgba(21, 21, 21, 0.08);
  --divider:      var(--ink-200);

  --accent:       var(--aqua-500);
  --accent-ink:   var(--ink-900);

  --focus-ring:   rgba(128, 204, 249, 0.55);

  /* ======== Radii ======== */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;     /* input fields */
  --r-lg:   16px;
  --r-pill: 999px;   /* pills & menus — signature shape */
  --r-circle: 9999px;

  /* ======== Elevation ======== */
  /* Aquaring uses a single soft shadow under floating glass elements */
  --shadow-soft:  0 15px 15px 0 rgba(0, 0, 0, 0.05);
  --shadow-card:  0 8px 24px 0 rgba(0, 0, 0, 0.06);
  --shadow-none:  0 0 0 0 transparent;

  /* ======== Blurs ======== */
  --blur-glass:    blur(24px);
  --blur-heavy:    blur(30px);
  --blur-light:    blur(10px);

  /* ======== Spacing (8-based, with dense 4 anchor) ======== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  40px;
  --s-8:  48px;
  --s-9:  64px;
  --s-10: 80px;
  --s-11: 120px;
  --s-12: 160px;

  /* Page gutter: 80px on desktop (1600w), 160 inner content margin */
  --page-gutter: 80px;
  --page-margin: 160px;
  --container-max: 1280px;
}