Feat: Frontend app shell

Frontend/src/styles/themes/_tokens.scss

@@ -37,6 +37,11 @@
   --radius-xl: 1.25rem;
   --radius-pill: 999px;
 
+  --control-size-md: 2.25rem;
+  --control-size-lg: 2.5rem;
+  --content-width-wide: 72rem;
+  --blur-overlay: 18px;
+
   --shadow-soft: 0 12px 32px hsl(220 30% 10% / 0.08);
   --shadow-strong: 0 20px 48px hsl(220 30% 10% / 0.16);
 

Frontend/src/styles/tools/_mixins.scss

@@ -18,6 +18,47 @@
   }
 }
 
+@mixin respond-down($breakpoint) {
+  @if $breakpoint == mobile {
+    @media (max-width: calc($breakpoint-mobile - 0.01rem)) {
+      @content;
+    }
+  } @else if $breakpoint == tablet {
+    @media (max-width: calc($breakpoint-tablet - 0.01rem)) {
+      @content;
+    }
+  } @else if $breakpoint == desktop {
+    @media (max-width: calc($breakpoint-desktop - 0.01rem)) {
+      @content;
+    }
+  }
+}
+
+@mixin interactive-frame(
+  $background: var(--color-surface),
+  $border: var(--color-border),
+  $color: var(--color-text-muted),
+  $radius: var(--radius-md)
+) {
+  border: 1px solid $border;
+  border-radius: $radius;
+  background: $background;
+  color: $color;
+}
+
+@mixin interactive-frame-hover(
+  $background: var(--color-surface-hover),
+  $border: var(--color-border-strong),
+  $color: var(--color-text)
+) {
+  &:hover {
+    background: $background;
+    border-color: $border;
+    color: $color;
+    text-decoration: none;
+  }
+}
+
 @mixin text-caption {
   font-size: var(--font-size-caption);
   font-weight: var(--font-weight-caption);