@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap');

/* ============================================================
   prefs.css — language (한/EN) control + FORCED 10x-style dark
   monochrome theme. Loaded AFTER the page CSS, so :root here
   cascades over design-system.css. Theme is dark-only (the sun/moon
   toggle is hidden); the flowchart canvas stays light "paper".
   verbatim design-system/site/studio.css are untouched.
   ============================================================ */

/* ---------------- language control ---------------- */
.fp-prefs { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.fp-lang {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 2px; gap: 2px; flex: none;
}
.fp-lang button {
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; line-height: 1;
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  padding: 6px 11px; border-radius: 99px; transition: background .15s ease, color .15s ease;
}
.fp-lang button:hover { color: var(--ink-2); }
.fp-lang button.active { background: rgba(255,255,255,.12); color: var(--ink); box-shadow: none; }
.studio-bar .fp-lang button { padding: 5px 9px; font-size: 12px; }
.fp-prefs.fp-float { position: absolute; top: 18px; right: 18px; z-index: 5; }

/* dark is forced → hide the theme toggle */
.fp-theme { display: none !important; }

/* ============================================================
   MONOCHROME DARK — pure black + white/gray (matches web/ landing)
   ============================================================ */
:root {
  --bg:        #000000;
  --bg-2:      #060606;
  --surface:   #0a0a0a;
  --surface-2: #101010;
  --ink:       #fafafa;
  --ink-2:     #b4b4b4;
  --ink-3:     #8b8b8b;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --coral:      #ffffff;               /* primary accent → white */
  --coral-deep: #e6e6e6;
  --coral-soft: rgba(255,255,255,.08);
  --blue:       #cfcfcf;
  --blue-soft:  rgba(255,255,255,.06);
  --green:      #cfcfcf;
  --green-soft: rgba(255,255,255,.06);
  --amber:      #cfcfcf;
  --amber-soft: rgba(255,255,255,.06);

  --font-display: 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-ui:      'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 24px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 70px -20px rgba(0,0,0,.8);
  --shadow-coral: none;
  color-scheme: dark;
}

body { letter-spacing: -.01em; }
h1, h2, h3, h4, h5, .display { letter-spacing: -.025em; }
::selection { background: rgba(255,255,255,.85); color: #000; }
.eyebrow { color: var(--ink-2); }

/* signature dotted backdrop behind everything */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #000 radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px) 0 0 / 22px 22px;
}

/* ---------------- buttons (white pill primary / dark secondary) ---------------- */
.btn-primary { background: #fff !important; color: #000 !important; box-shadow: none !important; }
.btn-primary:hover { background: rgba(255,255,255,.88) !important; }
.btn-ghost { background: rgba(255,255,255,.03); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.btn-dark { background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--line-2); }
.btn-dark:hover { background: rgba(255,255,255,.10); }

/* ---------------- chrome / surfaces (verbatim hardcoded-light overrides) ---------------- */
.site-header { background: rgba(0,0,0,.7) !important; }
.studio-bar  { background: rgba(0,0,0,.85) !important; }
.logo .mark  { background: rgba(255,255,255,.05) !important; }

/* editor + code panels (hardcoded light surfaces) → dark */
.pane.left, .gutter, .demo-code { background: #0a0a0a !important; }

/* monochrome python/C syntax highlight on the dark editor */
.tok-kw  { color: #ffffff !important; font-weight: 600; }
.tok-def { color: #dcdcdc !important; }
.tok-str { color: #9a9a9a !important; }
.tok-num { color: #c2c2c2 !important; }
.tok-com { color: #5e5e5e !important; }
.tok-bi  { color: #dcdcdc !important; }
.hl-band { background: rgba(255,255,255,.06) !important; border-left-color: #fff !important; }
.code-ta { caret-color: #fff !important; }

/* segmented control / lang active should pop on dark */
.seg button.active { background: rgba(255,255,255,.10) !important; color: var(--ink) !important; box-shadow: none !important; }

/* ============================================================
   Flowchart canvas stays LIGHT "paper" — but elements rendered OVER
   it need dark ink (the canvas is white, not dark).
   .canvas-wrap / .demo-flow keep their hardcoded light gradient.
   ============================================================ */
.fc-grid { background-image: radial-gradient(rgba(20,20,19,.10) 1.1px, transparent 1.1px) !important; opacity: .5 !important; }
.fc-empty h3 { color: #141413 !important; }
.fc-empty p  { color: #46443e !important; }
.fc-empty .ico { background: rgba(20,20,19,.06) !important; }
.fc-error { color: #c25e3f !important; }   /* light error box on paper keeps its tone; dark-red text */

/* ---------------- AI panel ---------------- */
.ai-ctx { background: rgba(255,255,255,.08) !important; color: var(--ink-2) !important; }
.ai-ctx.is-node { background: rgba(255,255,255,.10) !important; color: var(--ink) !important; }
.msg.user { background: rgba(255,255,255,.12) !important; color: var(--ink) !important; }

/* ---------------- inverted "dark band" elements → pure black ---------------- */
.cta-band { background: #050505 !important; }
.cta-band h2 { color: #fafafa !important; }
.cta-band .btn-ghost { color: #fafafa !important; border-color: rgba(255,255,255,.28) !important; }
.auth-aside { background: #050505 !important; }
.auth-aside, .auth-aside .logo { color: #fafafa !important; }

/* ---------------- misc hardcoded-coral/green patches ---------------- */
.plan .tag { background: #fff !important; color: #000 !important; }
.steps-rail .s.done .b,
.steps-rail .s.active .b { background: #fff !important; border-color: #fff !important; color: #000 !important; }
.save-pill { background: rgba(255,255,255,.10) !important; color: #cfcfcf !important; }