/**
 * Blare app shell — dashboard, Studio, Command Center chrome.
 * Builds on landing design tokens in /css/tokens.css
 */
@import url('/css/tokens.css');

:root {
  --brand-ink: var(--ink);
  --brand-coral: var(--coral);
  --brand-gold: var(--gold);
  --brand-cream: var(--cream);
  --brand-slate: var(--slate);
  --brand-mist: var(--mist);
  --brand-green: var(--green);
  --brand-red: var(--red);
  --brand: var(--ink);
  --brand-2: var(--coral);
  --accent: var(--coral);
  --muted: var(--slate);
  --slate-soft: #9C9388;
  --line: var(--mist);
  --bg: var(--cream);
  --cream-2: #F4EEE1;
  --panel: #fff;
  --sidebar: var(--ink);
  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --font-mono: var(--font-mono);
  --card: #fff;
  --mut: var(--slate);
  --purple: var(--coral);
  --teal: var(--green);
  --amber: #c87a1d;
  --coral-tint: #FBE3D8;
  --coral-deep: #C8472F;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-s: 0 2px 8px rgba(38, 34, 31, 0.05);
  --shadow-m: 0 8px 24px rgba(38, 34, 31, 0.07);
  --shadow-l: 0 20px 48px rgba(38, 34, 31, 0.10);
}

.app-shell-logo svg { display:block; width:34px; height:34px; }

::selection { background: var(--coral-tint); color: var(--ink); }

input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(232, 92, 51, 0.3);
  outline-offset: 1px;
  border-color: var(--coral) !important;
}