/* ============================================================
   In Silico — Design Tokens / デザイントークン
   v1.0  |  Source of truth: brand logo + silver ring photography
   Never hard-code hex in components. Reference these variables.
   ============================================================ */

:root {
  /* ---- Brand palette (sampled from the logo) --------------- */
  --brand-cyan:        #45bdd7;   /* logo outermost blade      */
  --brand-azure:       #2c9acb;
  --brand-blue:        #2482b6;
  --brand-steel:       #3b7b98;
  --brand-ultramarine: #1d58a6;
  --brand-indigo:      #3f4778;
  --brand-navy:        #182a5a;   /* logo innermost blade      */
  --brand-periwinkle:  #5784c0;   /* logo wordmark             */

  /* ---- Silver (sampled from the 99% fine-silver ring) ------ */
  --silver-100: #eef1f3;
  --silver-200: #cfd5da;
  --silver-300: #a9b2ba;
  --silver-400: #949ea8;   /* body-safe dim text, 4.5:1 on --bg */
  --silver-500: #6f7883;

  /* ---- Void: the substrate everything is rendered on ------- */
  --void-900: #06080c;
  --void-800: #0a0e14;
  --void-700: #10151d;
  --void-600: #161c26;
  --void-500: #1e2632;

  /* ---- Semantic surfaces ---------------------------------- */
  --bg:            var(--void-800);
  --bg-deep:       var(--void-900);
  --surface:       var(--void-700);
  --surface-raised:var(--void-600);
  --surface-inset: var(--void-900);

  /* ---- Semantic text ------------------------------------- */
  --text:          var(--silver-100);
  --text-muted:    var(--silver-300);
  --text-dim:      var(--silver-400);
  --text-on-accent:var(--void-900);

  /* ---- Semantic accents ---------------------------------- */
  --accent:        var(--brand-cyan);
  --accent-hover:  #63cbe0;
  --accent-press:  #2ba7c3;
  --accent-deep:   var(--brand-ultramarine);
  --accent-quiet:  var(--brand-indigo);
  --link:          var(--brand-cyan);
  --link-hover:    #8adcec;

  /* ---- Lines, rules, wireframe mesh ---------------------- */
  --line:          rgba(207, 213, 218, 0.14);
  --line-strong:   rgba(207, 213, 218, 0.30);
  --line-accent:   rgba(69, 189, 215, 0.45);
  /* Use ONLY where a border is the sole indicator of a control (≥3:1) */
  --line-control:  #7a838d;
  --mesh:          rgba(69, 189, 215, 0.10);
  --mesh-fine:     rgba(207, 213, 218, 0.055);

  /* ---- State ------------------------------------------- */
  /* All state colors verified ≥4.5:1 against --bg and --surface-raised */
  --state-ok:      #79d9bb;
  --state-warn:    #f0c274;
  --state-error:   #f08a84;
  --state-madeto:  var(--state-warn);
  --focus-ring:    0 0 0 2px var(--void-900), 0 0 0 4px var(--accent);

  /* ---- Typography -------------------------------------- */
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --font-jp:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display: var(--font-mono);
  --font-body: var(--font-jp);

  --fs-display: clamp(40px, 7vw, 104px);
  --fs-h1: clamp(32px, 4.4vw, 60px);
  --fs-h2: clamp(24px, 2.6vw, 36px);
  --fs-h3: 20px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: 11px;

  --lh-tight: 1.06;
  --lh-heading: 1.24;
  --lh-body: 1.8;

  --ls-display: -0.02em;
  --ls-label: 0.22em;   /* mono metadata labels        */
  --ls-wordmark: 0.34em;/* matches the logo lock-up    */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Space scale (4px base) --------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 192px;

  /* ---- Radius: near-zero. Digital origin, not organic ---- */
  --r-none: 0px;
  --r-xs: 1px;
  --r-sm: 2px;
  --r-pill: 999px;   /* tags only */

  /* ---- Borders ----------------------------------------- */
  --bw: 1px;
  --bw-thick: 2px;

  /* ---- Elevation: light is cold and low ----------------- */
  --shadow-sm: 0 1px 2px rgba(6, 8, 12, 0.6);
  --shadow-md: 0 8px 24px rgba(6, 8, 12, 0.55);
  --shadow-lg: 0 24px 64px rgba(6, 8, 12, 0.7);
  --glow-accent: 0 0 0 1px var(--line-accent), 0 0 32px rgba(69, 189, 215, 0.18);
  /* Contact shadow for cut-out product photography */
  --shadow-product: drop-shadow(0 24px 28px rgba(6, 8, 12, 0.85))
                    drop-shadow(0 2px 2px rgba(6, 8, 12, 0.6));

  /* ---- Motion: machine-precise, never bouncy ------------ */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- Layout ------------------------------------------ */
  --page-max: 1440px;
  --measure: 62ch;
  --gutter: clamp(20px, 4vw, 64px);
  --grid-unit: 32px;  /* wireframe mesh pitch */

  --z-base: 0; --z-raised: 10; --z-nav: 100; --z-modal: 1000;
}

/* Light substrate — for print, packaging sheets, invoices */
[data-theme="light"] {
  --bg: #f4f5f6;
  --bg-deep: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-inset: #ebedef;
  --text: var(--void-900);
  --text-muted: var(--silver-500);
  --text-dim: var(--silver-400);
  --text-on-accent: #ffffff;
  --accent: var(--brand-ultramarine);
  --link: var(--brand-ultramarine);
  --link-hover: var(--brand-blue);
  --line: rgba(6, 8, 12, 0.14);
  --line-strong: rgba(6, 8, 12, 0.3);
  --mesh: rgba(29, 88, 166, 0.10);
  --mesh-fine: rgba(6, 8, 12, 0.05);
}