/* MI Design System — flattened, self-contained stylesheet (no @import chain). */
/* ============================================================
   FONTS — webfont loading
   ------------------------------------------------------------
   SUBSTITUTION NOTE (flag to user):
   The reference site (SHOUWA) uses a heavy, slightly-extended
   commercial gothic for display. The closest free match is
   "Archivo" (Black / 900) — a grotesque with an expanded feel.
   Chinese copy uses "Noto Sans SC" (the de-facto professional
   Simplified-Chinese sans). "Space Mono" is used for technical
   labels, tags and date stamps (the small INFORMATION / date
   chips on the reference). Swap these @import lines for self-
   hosted @font-face rules if you license the originals.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Noto+Sans+SC:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   COLORS — base palette + semantic aliases
   Direction: clean white canvas, near-black ink, a single
   bright sky-blue accent, square black label chips.
   ============================================================ */
:root {
  /* ---- Neutrals (paper → ink) ---- */
  --white:       #ffffff;
  --paper:       #f4f5f6;   /* light gray section background */
  --paper-2:     #ebedef;   /* panel / inset */
  --paper-3:     #dfe2e5;   /* hairline fills, texture */
  --ink:         #14171a;   /* headings / strong text */
  --ink-2:       #3b4248;   /* body text */
  --ink-3:       #6c737a;   /* muted / captions */
  --ink-4:       #9aa1a7;   /* placeholder / disabled */
  --line:        #e3e6e9;   /* hairline borders */
  --line-2:      #cfd4d8;   /* stronger hairline */
  --ink-900:     #1b3152;   /* deep MINT navy — dark sections / footer (blue, not black) */
  --ink-850:     #21395f;   /* navy panel */
  --ink-800:     #2c4a72;   /* navy surface raised / borders */

  /* ---- Brand accent: MINT steel blue ---- */
  --sky-50:      #eef3fa;
  --sky-100:     #dae6f4;
  --sky-200:     #b7c9e6;
  --sky-300:     #88a4cf;
  --sky-400:     #527aae;
  --sky-500:     #355f9c;   /* PRIMARY accent — MINT blue */
  --sky-600:     #2b4e84;   /* hover / pressed */
  --sky-700:     #213d68;
  --sky-900:     #16294a;

  /* ---- Semantic support ---- */
  --green-500:   #2fa163;
  --amber-500:   #e0892f;
  --red-500:     #d8473b;

  /* ============== SEMANTIC ALIASES ============== */
  --text-strong:    var(--ink);
  --text-body:      var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-faint:     var(--ink-4);
  --text-on-dark:   #ffffff;
  --text-on-dark-2: #aeb6bd;
  --text-on-accent: #ffffff;
  --text-link:      var(--sky-600);

  --surface:        var(--white);
  --surface-muted:  var(--paper);
  --surface-panel:  var(--paper-2);
  --surface-dark:   var(--ink-900);
  --surface-dark-2: var(--ink-800);

  --border:         var(--line);
  --border-strong:  var(--ink);
  --border-muted:   var(--line-2);

  --accent:         var(--sky-500);
  --accent-hover:   var(--sky-600);
  --accent-press:   var(--sky-700);
  --accent-soft:    var(--sky-50);
  --accent-line:    var(--sky-200);
  --on-accent:      #ffffff;

  --chip-bg:        var(--ink);     /* black label chips */
  --chip-text:      #ffffff;
  --chip-bg-accent: var(--sky-500);

  --focus-ring:     var(--sky-500);

  --success:        var(--green-500);
  --warning:        var(--amber-500);
  --danger:         var(--red-500);
}


/* ============================================================
   TYPOGRAPHY — families, scale, weights, tracking
   Display = heavy wide gothic (Archivo 800/900, uppercase).
   Body / CJK = Noto Sans SC. Labels & dates = Space Mono.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Archivo', 'Noto Sans SC', system-ui, sans-serif; /* @kind font */
  --font-sans:    'Archivo', 'Noto Sans SC', system-ui, sans-serif; /* @kind font */
  --font-cjk:     'Noto Sans SC', 'Archivo', system-ui, sans-serif; /* @kind font */
  --font-mono:    'Space Mono', 'Archivo', ui-monospace, monospace; /* @kind font */

  /* ---- Weights ---- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extra:     800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Display / heading scale (fluid) ---- */
  --fs-display-1: clamp(3rem, 7vw, 6.5rem);    /* @kind font */
  --fs-display-2: clamp(2.25rem, 5vw, 4.5rem); /* @kind font */
  --fs-h1:        clamp(2rem, 4vw, 3.25rem);   /* @kind font */
  --fs-h2:        clamp(1.6rem, 3vw, 2.5rem);  /* @kind font */
  --fs-h3:        1.5rem;    /* 24  @kind font */
  --fs-h4:        1.25rem;   /* 20  @kind font */

  /* ---- Body scale ---- */
  --fs-body-lg:   1.125rem;  /* 18  @kind font */
  --fs-body:      1rem;      /* 16  @kind font */
  --fs-sm:        0.875rem;  /* 14  @kind font */
  --fs-xs:        0.75rem;   /* 12  @kind font */
  --fs-label:     0.6875rem; /* 11 — tracked uppercase chips  @kind font */

  /* ---- Line heights ---- */
  --lh-display:   0.98; /* @kind font */
  --lh-tight:     1.06; /* @kind font */
  --lh-snug:      1.2;  /* @kind font */
  --lh-heading:   1.25; /* @kind font */
  --lh-body:      1.75; /* @kind font */
  --lh-cjk:       1.9;  /* @kind font */

  /* ---- Letter spacing ---- */
  --tracking-display: -0.02em; /* @kind font */
  --tracking-tight:   -0.01em; /* @kind font */
  --tracking-normal:  0;       /* @kind font */
  --tracking-wide:    0.04em;  /* @kind font */
  --tracking-label:   0.18em;  /* uppercase labels  @kind font */
  --tracking-mono:    0.04em;  /* @kind font */
}


/* ============================================================
   SPACING, RADII, SHADOWS, LAYOUT, MOTION
   The reference is square and flat: tiny radii, hairline
   borders, restrained shadows, sharp black chips.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6.5rem;   /* 104 */
  --space-12:  8rem;     /* 128 */

  /* ---- Section rhythm ---- */
  --section-y:    clamp(3.5rem, 2rem + 6vw, 7rem); /* @kind spacing */
  --container:    1240px; /* @kind spacing */
  --container-wide: 1440px; /* @kind spacing */
  --gutter:       clamp(1.25rem, 0.5rem + 3vw, 4rem); /* @kind spacing */

  /* ---- Radii (kept sharp) ---- */
  --radius-0:   0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-pill: 999px;   /* circular arrow buttons */

  /* ---- Borders ---- */
  --bw-hair:    1px;
  --bw-bold:    2px;
  --bw-heavy:   3px;

  /* ---- Shadows (subtle; mostly flat + hairline) ---- */
  --shadow-xs:   0 1px 2px rgba(20, 23, 26, 0.06);
  --shadow-sm:   0 2px 8px rgba(20, 23, 26, 0.07);
  --shadow-card: 0 12px 34px -18px rgba(20, 23, 26, 0.28);
  --shadow-pop:  0 24px 60px -24px rgba(12, 14, 16, 0.45);
  --shadow-focus: 0 0 0 3px rgba(17, 159, 218, 0.32);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur:         240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* ---- Z-index ---- */
  --z-header:    100; /* @kind other */
  --z-overlay:   200; /* @kind other */
  --z-toast:     300; /* @kind other */
}


/* ============================================================
   BASE — light element defaults so foundation cards and
   components inherit the brand voice. Ships to consumers.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to the display family, heavy + tight */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-extra);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

button { font-family: inherit; }

::selection { background: var(--sky-200); color: var(--ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ---- Reusable display utility classes ---- */
.u-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.u-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--chip-text);
  background: var(--chip-bg);
}

.u-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}

.u-cjk { font-family: var(--font-cjk); line-height: var(--lh-cjk); }