/* =============================================================
   Maker Ronin — Colors & Type
   Cyberpunk hybrid palette: Neon Cyan + Neon Magenta on deep black.
   Import this file as the baseline for any Maker Ronin artifact.
   ============================================================= */

/* ------------- Fonts ------------- */
/* Display: JetBrains Mono — angular, mono, cyberpunk-coded. (Google Fonts)
   Kanji / East Asian: Noto Sans JP — brand-supplied variable font (local).
   Body: Inter — readable against dark backgrounds. (Google Fonts)
   NOTE: JetBrains Mono and Inter are still substitutions; swap if real files arrive. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Noto Sans JP';
  src: url('fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ CORE BRAND COLORS ============ */
  --ronin-cyan:          #00E5FF;
  --ronin-cyan-dark:     #0088A0;   /* hover / pressed */
  --ronin-cyan-soft:     #00343D;   /* panel tints */

  --ronin-magenta:       #FF2EF7;
  --ronin-magenta-dark:  #B000B9;

  --ronin-white:         #F2F2F2;
  --ronin-black:         #0A0A0F;

  /* ============ NEUTRALS / UI ============ */
  --ronin-ultra-dark:    #050508;   /* floating panels, page */
  --ronin-neutral-dark:  #1A1A1F;   /* cards */
  --ronin-panel:         #12121C;   /* sidebars, panels */
  --ronin-card-1:        #0F0F15;
  --ronin-card-2:        #111119;
  --ronin-border:        #CCCCCC;   /* light on dark */
  --ronin-border-subtle: #2A2A34;   /* dim dividers */
  --ronin-disabled:      #888888;

  /* ============ GLOWS & EFFECTS (RGBA) ============ */
  --ronin-glow-cyan:     rgba(0, 229, 255, 0.55);
  --ronin-glow-magenta:  rgba(255, 46, 247, 0.55);
  --ronin-glow-purple:   rgba(138, 0, 255, 0.45);
  --ronin-glow-blue:     rgba(0, 140, 255, 0.40);

  /* ============ GRADIENTS ============ */
  --ronin-bg-gradient: linear-gradient(135deg, #0A0A0F 0%, #00141A 40%, #050008 100%);
  --ronin-stroke-gradient: linear-gradient(135deg, #00E5FF 0%, #0088FF 50%, #FF2EF7 100%);
  --ronin-wave-gradient: linear-gradient(90deg, #00E5FF 0%, #8A00FF 55%, #FF2EF7 100%);

  /* ============ SEMANTIC FG / BG ============ */
  --fg-1: #F2F2F2;              /* primary text */
  --fg-2: #C7C7CF;              /* secondary */
  --fg-3: #888890;              /* tertiary / meta */
  --fg-disabled: #555560;
  --fg-accent: #00E5FF;
  --fg-accent-2: #FF2EF7;

  --bg-0: #050508;              /* page */
  --bg-1: #0A0A0F;              /* base surface */
  --bg-2: #12121C;              /* raised panel */
  --bg-3: #1A1A1F;              /* card */
  --bg-inset: #00141A;          /* sunken / code */

  --border-1: #2A2A34;          /* default */
  --border-2: #3A3A46;          /* stronger */
  --border-accent: var(--ronin-cyan);

  /* ============ SEMANTIC STATUS ============ */
  --status-success: #00E5FF;    /* brand ties success to cyan */
  --status-warning: #FFB648;
  --status-danger:  #FF3D5C;
  --status-info:    #008CFF;

  /* ============ TYPE FAMILIES ============ */
  --font-display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-kanji:   'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ============ TYPE SCALE ============ */
  --fs-display:  64px;   --lh-display:  1.02;  --ls-display: -0.02em;
  --fs-h1:       44px;   --lh-h1:       1.08;  --ls-h1:      -0.015em;
  --fs-h2:       32px;   --lh-h2:       1.15;  --ls-h2:      -0.01em;
  --fs-h3:       22px;   --lh-h3:       1.25;
  --fs-h4:       18px;   --lh-h4:       1.3;
  --fs-body:     15px;   --lh-body:     1.55;
  --fs-small:    13px;   --lh-small:    1.5;
  --fs-micro:    11px;   --lh-micro:    1.4;  /* ALL-CAPS LABELS */
  --fs-mono:     13px;   --lh-mono:     1.55;

  /* ============ SPACING ============ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ============ RADII ============ */
  --r-0: 0;
  --r-1: 2px;           /* crisp, cyberpunk-default */
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;
  --r-hex-clip: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

  /* ============ SHADOWS / GLOWS ============ */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.6);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.7);
  --glow-cyan-sm:  0 0 8px var(--ronin-glow-cyan);
  --glow-cyan-md:  0 0 18px var(--ronin-glow-cyan), 0 0 2px rgba(0,229,255,0.9);
  --glow-cyan-lg:  0 0 40px var(--ronin-glow-cyan), 0 0 4px rgba(0,229,255,0.9);
  --glow-magenta-sm: 0 0 8px var(--ronin-glow-magenta);
  --glow-magenta-md: 0 0 18px var(--ronin-glow-magenta), 0 0 2px rgba(255,46,247,0.9);
  --glow-magenta-lg: 0 0 40px var(--ronin-glow-magenta), 0 0 4px rgba(255,46,247,0.9);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — drop-in for raw HTML
   ============================================================ */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg-1);
  text-transform: uppercase;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-1);
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.kanji {
  font-family: var(--font-kanji);
  font-weight: 900;
}
p { color: var(--fg-2); margin: 0 0 var(--sp-4); }

.eyebrow, .micro {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}
code {
  background: var(--bg-inset);
  color: var(--ronin-cyan);
  padding: 2px 6px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
}

a {
  color: var(--ronin-cyan);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), text-shadow var(--dur-2) var(--ease-out);
}
a:hover { color: #5CF2FF; text-shadow: 0 0 10px var(--ronin-glow-cyan); }
a:active { color: var(--ronin-cyan-dark); }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-1) 20%, var(--border-1) 80%, transparent);
  margin: var(--sp-6) 0;
}

::selection { background: var(--ronin-magenta); color: var(--ronin-black); }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: var(--r-1); }
::-webkit-scrollbar-thumb:hover { background: var(--ronin-cyan-dark); }