@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root[data-design="yoake"] {
  --background: 54 23% 98%;
  --foreground: 225 24% 6%;
  --card: 236 100% 98%;
  --card-foreground: 225 24% 6%;
  --popover: 236 100% 98%;
  --popover-foreground: 225 24% 6%;
  --primary: 225 24% 6%;
  --primary-foreground: 54 23% 98%;
  --secondary: 248 100% 92%;
  --secondary-foreground: 225 24% 6%;
  --muted: 232 15% 44%;
  --muted-foreground: 232 15% 44%;
  --accent: 188 91% 87%;
  --accent-foreground: 225 24% 6%;
  --destructive: 346 49% 57%;
  --destructive-foreground: 54 23% 98%;
  --border: 220 11% 7%;
  --input: 220 11% 7%;
  --ring: 188 91% 87%;
  --radius: 0px;
}

:root[data-design="yoake"] body { font-family: 'Noto Sans', ui-sans-serif, sans-serif; }
:root[data-design="yoake"] .font-editorial { font-family: 'Archivo Narrow', Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.045em; }
:root[data-design="yoake"] .font-mono { font-family: 'Share Tech Mono', ui-monospace, monospace; }
:root[data-design="yoake"] :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-full) { border-radius: 0 !important; }
:root[data-design="yoake"] .shadow, :root[data-design="yoake"] .shadow-sm, :root[data-design="yoake"] .shadow-md, :root[data-design="yoake"] .shadow-lg { box-shadow: 0 18px 50px rgba(11, 13, 18, 0.10); }

:root[data-design="yoake"] .yoake-watch-pane { position: relative; box-shadow: 0 24px 60px rgba(11, 13, 18, 0.14); }
:root[data-design="yoake"] .yoake-titlebar { display: flex; align-items: center; height: 20px; margin: -1.5rem -1.5rem 0; padding: 0 8px; background: #0B0D12; color: #FBFBF8; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.08em; }
:root[data-design="yoake"] .yoake-titlebar.yoake-titlebar--edge { position: absolute; inset: 0 0 auto; margin: 0; }
@media (min-width: 640px) { :root[data-design="yoake"] .yoake-titlebar { margin: -2.5rem -2.5rem 0; } }
@media (min-width: 1024px) { :root[data-design="yoake"] .yoake-titlebar { margin: -3rem -3rem 0; } }
:root[data-design="yoake"] .yoake-led { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: #FBFBF8; }
:root[data-design="yoake"] .yoake-led:nth-child(2) { background: #BFF6FF; }
:root[data-design="yoake"] .yoake-led:nth-child(3) { background: #2BCB84; }