/* ============================================================================
   CoolPro — theme contract (design tokens)
   House style ported from Subsystem's theme.css: named CSS variables only here,
   every component reads them. Dark editor palette by default.
   ============================================================================ */
:root {
  --bg:        #0b0c10;
  --surface:   #14161c;
  --surface-2: #1b1e26;
  --panel:     #101218;
  --border:    #272b36;
  --border-2:  #353b49;
  --fg:        #e8eaf0;
  --muted:     #8b93a7;
  --faint:     #5b6275;

  --accent:    #5b8cff;
  --accent-2:  #7a6cff;
  --accent-fg: #ffffff;     /* readable foreground ON the accent (obp contract) */
  --neon:      #5bffd0;
  --success:   #3fcf8e;
  --warning:   #f5b14c;
  --error:     #ef5e6b;

  /* glass / mica (obp surfaces): a translucent panel that reads as frosted chrome.
     COHESION IS A SINGLE KNOB: --transparency (0..1, driven by the Settings opacity slider) is the
     one dial that thins or thickens every acrylic surface in the suite at once. --glass folds it in. */
  --mica-rgb:    20 22 28;
  --mica-opacity: .5;    /* more acrylic: thinner tint, you see more through the glass */
  --transparency: 1;
  --glass: rgba(var(--mica-rgb), calc(var(--mica-opacity) * var(--transparency)));

  /* acrylic material — flickpaint's .mica-panel recipe, ported to host tokens so the studio chrome
     (menu bar, menus, drawers) wears the exact same frosted glass as the paint panes. One recipe,
     one knob. Less opaque than before, but kept a little blurry so text stays legible over it. */
  --mica-blur: 24px;
  --mica-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --mica-spray: radial-gradient(120% 140% at 20% -10%, rgba(255,255,255,0.05), transparent 55%);
  --mica-gloss: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 18%, transparent 40%);

  --track-video: #2b3a67;
  --track-audio: #2d5b4e;
  --clip-video:  #3a63d0;
  --clip-audio:  #2fa37f;
  --clip-image:  #b3742f;
  --playhead:    #ff5a5a;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", ui-monospace, "Liberation Mono", Menlo, monospace;

  --radius: 8px;
  --radius-sm: 5px;
  --r-shell: 46px;      /* shell app-switcher bar height */
  --r-menubar: 40px;    /* top menu-bar height (desktop chrome) */
  --r-bar: 48px;        /* editor command-ribbon height */
  --r-status: 26px;     /* editor status bar height */
  --r-rail: 56px;       /* timeline ruler height */
  --shadow: 0 8px 24px rgba(0,0,0,.45);
}

/* NF glyph icons (the obp icon vocabulary): CaskaydiaCove/Cascadia Nerd Font, no icon library.
   Already vendored for the guests; loaded here so the editor chrome can use the same glyphs. */
@font-face {
  font-family: 'CascadiaNF';
  src: url('vendor/ui/fonts/CascadiaCodeNF.ttf') format('truetype');
  font-display: swap;
}
.nf { font-family: 'CascadiaNF', var(--font-mono); font-style: normal; font-weight: 400;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

/* ---- .acrylic: the one shared mica material. Anything that wants flickpaint's frosted glass wears
   this class; it reads --glass (the single cohesion knob) for tint and the --mica-* tokens for the
   grain/spray/gloss + blur. data-mica="off" flattens it everywhere in one place. ---- */
.acrylic {
  background-color: var(--glass);
  background-image: var(--mica-noise), var(--mica-spray), var(--mica-gloss);
  background-size: 140px 140px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
  backdrop-filter: blur(var(--mica-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--mica-blur)) saturate(180%);
}
:root[data-mica="off"] .acrylic { background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: 14px;
  overflow: hidden; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- shared atoms ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: #232733; border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--accent), #466fe0); border-color: #3a5fce; color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; display: inline-block; }

.chip {
  font-size: 11px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.badge-soon { font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-radius: 999px; padding: 1px 7px; }