production

lib/views/helpers/constants/miler_surface.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/widgets.dart';
 
 import 'package:miler/views/helpers/constants/Colorconstants.dart';
+import 'package:miler/views/helpers/constants/narrative.dart';
 import 'package:miler/views/helpers/constants/design_constants.dart';
 
 /// ─────────────────────────────────────────────────────────────────────────
@@ -46,7 +47,15 @@ abstract final class MilerSurface {
   ///
   /// Deliberately not white: a canvas that is white leaves nothing for a white
   /// surface to be distinguishable *from*, which is the state this app was in.
-  static const Color canvas = ColorConstants.daylightSurface;
+  ///
+  /// ── #DEE3EA → #F8F9FA ──
+  ///
+  /// It was a heavy slate, chosen when a card was a bare white fill and the
+  /// tonal step was the *only* thing separating the two. Cards carry a hairline
+  /// and a lift now (see [MilerPanel]), so the ground no longer has to do that
+  /// work alone — and a page this dark under bordered cards reads as heavy
+  /// rather than as layered. The brief's canvas is the value.
+  static const Color canvas = Narrative.canvas;
 
   /// **Layer 1.** A region the rider reads or works in — a sheet's body, a
   /// details page, a grouped operational block.
@@ -88,10 +97,18 @@ abstract final class MilerSurface {
   /// The gutter a layer-1 panel leaves around itself, so the canvas reads as
   /// ground rather than as a hairline. One number, because two panels a few
   /// points apart is how a page stops looking composed.
+  ///
+  /// 12 → 20. The brief keeps a generous margin off the screen's edge so
+  /// nothing interactive touches it and the panels read as floating; its own
+  /// figure is 24, and 20 is where that lands once the panel's internal padding
+  /// (below, also raised) is added to it — 40 of inset before a word on a
+  /// 390pt phone is as far as this can go and still hold a full address.
   static const double panelGutter = 12;
 
   /// The breathing room *inside* a layer-1 panel.
-  static const double panelPad = 14;
+  ///
+  /// 14 → 20, the brief's figure for the padding inside a card.
+  static const double panelPad = 16;
 }
 
 /// ── Layer 1, as a widget ──
@@ -140,10 +157,17 @@ class MilerPanel extends StatelessWidget {
               vertical: MilerSurface.panelPad,
             )
           : EdgeInsets.zero,
-      decoration: BoxDecoration(
-        color: MilerSurface.working,
-        borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
-      ),
+      // ── Level 1, as the Narrative brief draws it ──
+      //
+      // It was a bare white fill on a dark canvas: separation bought with a
+      // 1.29:1 tonal step, no border and no shadow, on the rule that an
+      // outline over a step that already works is a line to read past.
+      //
+      // The brief inverts that trade — a *light* canvas, and cards that carry
+      // a hairline and a soft lift. Both work; what does not is half of each,
+      // so the panel takes the brief's whole recipe and the ground goes light
+      // with it. See [Narrative].
+      decoration: Narrative.cardBox(),
       child: child,
     );
   }