/* ============================================================================
   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;

  /* One honest blue, not a blue-into-violet gradient: --accent-2 is a deeper shade of the SAME
     hue (monochromatic), not a hue-shift toward purple. Public-interest tool, not a neon sign. */
  --accent:    #5b8cff;
  --accent-2:  #2f5fc7;
  --accent-fg: #ffffff;     /* readable foreground ON the accent (obp contract) */
  --neon:      #3fae9c;     /* calm teal — kept the name (referenced by id elsewhere), toned the value down */
  --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: .72;
  --transparency: 1;
  /* modern rgb() slash syntax — NOT rgba(var(--mica-rgb), alpha): --mica-rgb is a space-separated
     triple, and mixing that with a legacy comma before the alpha is invalid CSS, which silently
     drops the whole background-color (every "acrylic" surface in the shell rendered flat opaque
     instead of tinted glass). This is the one place that combination has to be right. */
  --glass: rgb(var(--mica-rgb) / calc(var(--mica-opacity) * var(--transparency)));

  /* acrylic material — flickpaint's .mica-panel recipe, ported to host tokens so the studio chrome
     (taskbar, menus, drawers) wears the exact same frosted glass as the paint panes. One recipe,
     one knob. */
  --mica-blur: 30px;
  --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-bar: 48px;        /* editor command-ribbon height */
  --r-status: 26px;     /* editor status bar height */
  --r-rail: 56px;       /* timeline ruler height */

  /* Fluent-style depth scale — flat cards get a whisper of lift (--shadow-1), popovers/menus
     sit clearly above the page (--shadow-2, the old --shadow name kept for compat), modal
     sheets read as the topmost layer (--shadow-3). Depth via shadow, not tonal color. */
  --shadow-1: 0 1px 3px rgba(0,0,0,.30);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 20px 50px -10px rgba(0,0,0,.70);
  --shadow: var(--shadow-2);
}

/* 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, .btn:active { 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, .btn.primary:active { filter: brightness(1.07); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover, .btn.ghost:active { 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; }