/* ═══════════════════════════════════════════════════════════════════
   CREATIVE STUDIO — "PRESS" Editorial Design System (refresh)
   Bold magazine typography · color-coded modes · light + dark
   Display: Playfair Display · UI/body: Be Vietnam Pro · Mono: JetBrains Mono
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* —— Paper / ink (light) —— */
  --paper-0: #FBF8F1;   /* page */
  --paper-1: #FFFFFF;   /* cards */
  --paper-2: #F2ECE0;   /* sunken / wells */
  --paper-3: #E9E1D1;
  --ink-0:   #16120D;   /* headlines */
  --ink-1:   #3A332A;   /* body */
  --ink-2:   #6A6155;   /* muted */
  --ink-3:   #9A9081;   /* faint */
  --line:        #E3DACA;
  --line-strong: #CFC4AE;
  --ink-invert:  #FBF8F1;

  /* —— Mode accents (vivid, color-coded) —— */
  --c-coral:  #E8492B;  --c-coral-soft:  #FBE3DC;  --c-coral-ink:  #8E2614;
  --c-violet: #6B3BE6;  --c-violet-soft: #E8E0FB;  --c-violet-ink: #3E1F94;
  --c-teal:   #0E8A6E;  --c-teal-soft:   #D6EEE6;  --c-teal-ink:   #0A5443;
  --c-amber:  #D9851A;  --c-amber-soft:  #F8EBD3;  --c-amber-ink:  #855011;
  --c-indigo: #3D5BD4;  --c-indigo-soft: #DEE4FA;  --c-indigo-ink: #233A95;
  --c-rose:   #C4356E;  --c-rose-soft:   #F7DEE9;  --c-rose-ink:   #84204A;

  /* active mode accent — overwritten by [data-mode] */
  --accent:      var(--c-coral);
  --accent-soft: var(--c-coral-soft);
  --accent-ink:  var(--c-coral-ink);

  /* —— Type —— */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* —— Radius / shadow / motion —— */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-full: 999px;
  --sh-sm: 0 1px 2px rgba(22,18,13,.06), 0 1px 1px rgba(22,18,13,.04);
  --sh-md: 0 6px 20px rgba(22,18,13,.08), 0 2px 6px rgba(22,18,13,.05);
  --sh-lg: 0 20px 48px rgba(22,18,13,.12), 0 6px 16px rgba(22,18,13,.07);
  --ease: cubic-bezier(.32,.72,0,1);
  --fast: 130ms; --base: 240ms; --slow: 420ms;
}

[data-mode="storyboard"] { --accent: var(--c-coral);  --accent-soft: var(--c-coral-soft);  --accent-ink: var(--c-coral-ink); }
[data-mode="branding"]   { --accent: var(--c-violet); --accent-soft: var(--c-violet-soft); --accent-ink: var(--c-violet-ink); }
[data-mode="slides"]     { --accent: var(--c-teal);   --accent-soft: var(--c-teal-soft);   --accent-ink: var(--c-teal-ink); }
[data-mode="motion"]     { --accent: var(--c-amber);  --accent-soft: var(--c-amber-soft);  --accent-ink: var(--c-amber-ink); }
[data-mode="present"]    { --accent: var(--c-indigo); --accent-soft: var(--c-indigo-soft); --accent-ink: var(--c-indigo-ink); }
[data-mode="sequence"]   { --accent: var(--c-rose);   --accent-soft: var(--c-rose-soft);   --accent-ink: var(--c-rose-ink); }

/* —————————————————— DARK —————————————————— */
[data-theme="dark"] {
  --paper-0: #14110D;
  --paper-1: #1E1A14;
  --paper-2: #100D0A;
  --paper-3: #2A251E;
  --ink-0:   #F4EEE2;
  --ink-1:   #D8CFBF;
  --ink-2:   #9C9384;
  --ink-3:   #6E665A;
  --line:        #2C2820;
  --line-strong: #423C31;
  --ink-invert:  #14110D;

  --c-coral:  #FF6A4D;  --c-coral-soft:  #3A1E16;  --c-coral-ink:  #FFB6A4;
  --c-violet: #9E7BFF;  --c-violet-soft: #251A45;  --c-violet-ink: #CDBCFF;
  --c-teal:   #2BC39C;  --c-teal-soft:   #0E2E27;  --c-teal-ink:   #8FE6D0;
  --c-amber:  #F0A93B;  --c-amber-soft:  #36280F;  --c-amber-ink:  #F7CF8C;
  --c-indigo: #7E97FF;  --c-indigo-soft: #1A2347;  --c-indigo-ink: #BCC9FF;
  --c-rose:   #F2769F;  --c-rose-soft:   #3A1626;  --c-rose-ink:   #FAB8CF;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 6px 20px rgba(0,0,0,.5);
  --sh-lg: 0 20px 48px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--paper-0);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--base) var(--ease), color var(--base) var(--ease);
}
#root { min-height: 100%; }
::selection { background: var(--accent); color: var(--ink-invert); }

/* —————————————————— Type primitives —————————————————— */
.display {
  font-family: var(--font-display);
  color: var(--ink-0);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.0;
  text-wrap: balance;
  margin: 0;
  padding-bottom: .04em;
}
.display-it { font-style: italic; font-weight: 500; }
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.serif { font-family: var(--font-display); }
.mono  { font-family: var(--font-mono); }

/* hairline rule used everywhere in editorial layout */
.rule { height: 1px; background: var(--line); border: 0; }
.rule-ink { height: 2px; background: var(--ink-0); border: 0; }

/* —————————————————— Buttons —————————————————— */
.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--r-full);
  padding: 10px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink-0); color: var(--paper-0); }
.btn-ink:hover { background: var(--accent); color: var(--ink-invert); }
.btn-accent { background: var(--accent); color: var(--ink-invert); }
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink-1); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink-0); color: var(--ink-0); }
.btn-soft { background: var(--accent-soft); color: var(--accent-ink); }
.btn-soft:hover { filter: brightness(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { padding: 6px 13px; font-size: 12.5px; }
.btn-icon { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: var(--r-full); }

/* —————————————————— Surfaces —————————————————— */
.card {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.well { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); }

/* chips / tags */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  background: var(--paper-1);
}
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.tag-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block;
}

/* inputs */
.field {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 15px;
  background: var(--paper-1);
  color: var(--ink-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 11px 14px;
  transition: border var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field::placeholder { color: var(--ink-3); }

/* —————————————————— Motion helpers —————————————————— */
@keyframes riseIn { from { transform: translateY(9px); } to { transform: none; } }
.rise { animation: riseIn var(--base) var(--ease); }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton {
  background: linear-gradient(110deg, var(--paper-2) 8%, var(--paper-3) 20%, var(--paper-2) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulseDot 1.3s ease-in-out infinite; }

/* scrollbars */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 3px solid var(--paper-0); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-track { background: transparent; }

/* utility */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
[hidden] { display: none !important; }