anentrypoint-design 0.0.10 → 0.0.12

package/dist/247420.css

@@ -157,22 +157,22 @@
    Loads before any consumer rule; all var(--*) refs resolve.
    ============================================================ */
 .ds-247420 {
-  --paper:        #EFE9DD;
-  --ink:          #0B0B09;
-  --acid:         #B8FF00;
-  --link:         #1F4DFF;
-  --warn:         #FF3B1F;
-  --live:         #00A86B;
-
-  --green:        #247420;
-  --green-2:      #92CEAC;
-  --green-deep:   #1c5a19;
+  --paper:        #F5F0E4;
+  --ink:          #1F1B16;
+  --acid:         #C8FF4D;
+  --link:         #3A66FF;
+  --warn:         #FF6B4A;
+  --live:         #2BB07F;
+
+  --green:        #3F8A4A;
+  --green-2:      #B6DEC1;
+  --green-deep:   #2B6B36;
   --green-fg:     #FFFFFF;
-  --purple:       #420247;
+  --purple:       #6B3A78;
   --purple-fg:    #FFFFFF;
-  --mascot:       #E84B8A;
+  --mascot:       #F07AA8;
   --mascot-fg:    #FFFFFF;
-  --sun:          #FFD100;
+  --sun:          #FFD86B;
 
   --ff-display:   'Archivo Black', 'Archivo', system-ui, sans-serif;
   --ff-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -192,14 +192,14 @@
   --surface-2:    rgba(0,0,0,0.04);
   --surface-ink-2: rgba(255,255,255,0.06);
 
-  --r-1:          0;
-  --r-2:          0;
-  --r-3:          0;
+  --r-1:          6px;
+  --r-2:          10px;
+  --r-3:          18px;
   --r-pill:       9999px;
 
   /* Extended brand palette */
-  --flame:        #FF5C1A;
-  --sky:          #3B82F6;
+  --flame:        #FF8454;
+  --sky:          #6FA9FF;
 
   /* Foreground / background aliases — resolved after panel tokens are set;
      these are reset below once panel tokens exist, but raw defaults here
@@ -235,12 +235,12 @@
   --measure:      72ch;
 
   /* Extended type scale */
-  --fs-body:      13px;
-  --fs-lg:        14px;
-  --fs-sm:        12px;
-  --fs-xs:        11px;
-  --fs-tiny:      11px;
-  --fs-micro:     9px;
+  --fs-body:      15px;
+  --fs-lg:        17px;
+  --fs-sm:        14px;
+  --fs-xs:        13px;
+  --fs-tiny:      13px;
+  --fs-micro:     12px;
   --fs-h3:        14px;
   --fs-h4:        13px;
 
@@ -265,7 +265,7 @@
   background: var(--panel-0);
   color: var(--panel-text);
   font-family: var(--ff-mono);
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -343,12 +343,11 @@
 }
 .ds-247420 .prose p { margin: 0 0 var(--space-4) 0; }
 
-/* Label — mono caps, terminal voice */
+/* Label — mono, gentle */
 .ds-247420 .t-label {
   font-family: var(--ff-mono);
   font-size: var(--fs-xs);
-  text-transform: uppercase;
-  letter-spacing: var(--tr-label);
+  letter-spacing: 0.02em;
   font-weight: 500;
 }
 
@@ -363,8 +362,7 @@
 .ds-247420 .t-micro {
   font-family: var(--ff-mono);
   font-size: var(--fs-micro);
-  letter-spacing: var(--tr-label);
-  text-transform: uppercase;
+  letter-spacing: 0.02em;
   color: var(--fg-3);
 }
 
@@ -449,16 +447,15 @@
 .ds-247420 .stamp {
   display: inline-block;
   padding: var(--space-1) var(--space-3);
-  
+
   border-radius: var(--r-pill);
   color: var(--fg);
   background: transparent;
   font-family: var(--ff-mono);
   font-size: var(--fs-tiny);
-  letter-spacing: var(--tr-label);
-  text-transform: uppercase;
+  letter-spacing: 0.02em;
   font-weight: 600;
-  transform: rotate(-2deg);
+  transform: none;
 }
 .ds-247420 .stamp.ink     { background: var(--fg);     color: var(--bg); }
 .ds-247420 .stamp.green   { background: var(--green);  color: var(--green-fg);   }
@@ -475,68 +472,66 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-3) var(--space-5);
   background: var(--fg);
   color: var(--bg);
-  
-  border-radius: var(--r-2);
-  box-shadow: 4px 4px 0 var(--fg);
+
+  border-radius: var(--r-pill);
+  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
   font-family: var(--ff-mono);
   font-weight: 600;
   font-size: var(--fs-sm);
-  text-transform: uppercase;
-  letter-spacing: var(--tr-caps);
+  letter-spacing: 0.01em;
   text-decoration: none;
   cursor: pointer;
-  transition: transform var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
+  transition: transform var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease), filter var(--dur-snap) var(--ease);
 }
-.ds-247420 .btn-stamp:hover  { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--fg); }
-.ds-247420 .btn-stamp:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fg); }
+.ds-247420 .btn-stamp:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,0.10); filter: brightness(1.04); }
+.ds-247420 .btn-stamp:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.10); }
 
-.ds-247420 .btn-stamp.green  { background: var(--green);  color: var(--green-fg);   box-shadow: 4px 4px 0 var(--ink); }
-.ds-247420 .btn-stamp.purple { background: var(--purple); color: var(--purple-fg);  box-shadow: 4px 4px 0 var(--ink); }
-.ds-247420 .btn-stamp.mascot { background: var(--mascot); color: var(--mascot-fg);  box-shadow: 4px 4px 0 var(--ink); }
-.ds-247420 .btn-stamp.sun    { background: var(--sun);    color: var(--ink);        box-shadow: 4px 4px 0 var(--ink); }
-.ds-247420 .btn-stamp.flame  { background: var(--flame);  color: var(--paper);      box-shadow: 4px 4px 0 var(--ink); }
-.ds-247420 .btn-stamp.acid   { background: var(--green);  color: var(--green-fg);   box-shadow: 4px 4px 0 var(--ink); } /* legacy */
+.ds-247420 .btn-stamp.green  { background: var(--green);  color: var(--green-fg); }
+.ds-247420 .btn-stamp.purple { background: var(--purple); color: var(--purple-fg); }
+.ds-247420 .btn-stamp.mascot { background: var(--mascot); color: var(--mascot-fg); }
+.ds-247420 .btn-stamp.sun    { background: var(--sun);    color: var(--ink); }
+.ds-247420 .btn-stamp.flame  { background: var(--flame);  color: var(--paper); }
+.ds-247420 .btn-stamp.acid   { background: var(--green);  color: var(--green-fg); }
 
 /* Plain button — default */
 .ds-247420 .btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  background: transparent;
+  padding: var(--space-3) var(--space-5);
+  background: var(--bg-2);
   color: var(--fg);
-  
-  border-radius: var(--r-2);
+
+  border-radius: var(--r-pill);
   font-family: var(--ff-mono);
   font-weight: 500;
   font-size: var(--fs-sm);
-  text-transform: uppercase;
-  letter-spacing: var(--tr-caps);
+  letter-spacing: 0.01em;
   text-decoration: none;
   cursor: pointer;
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
 }
-.ds-247420 .btn:hover  { background: var(--fg); color: var(--bg); }
-.ds-247420 .btn:active { background: var(--green); color: var(--green-fg);  }
+.ds-247420 .btn:hover  { background: var(--green-2); color: var(--ink); }
+.ds-247420 .btn:active { background: var(--green); color: var(--green-fg); }
 
 /* Ghost/link button */
 .ds-247420 .btn-ghost {
   background: transparent;
-  
+
   color: var(--fg);
   font-family: var(--ff-mono);
   font-size: var(--fs-sm);
-  text-transform: uppercase;
-  letter-spacing: var(--tr-caps);
-  padding: var(--space-2) 0;
+  letter-spacing: 0.01em;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--r-pill);
   cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 4px;
+  text-decoration: none;
+  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
 }
-.ds-247420 .btn-ghost:hover { color: var(--green-fg); background: var(--green); }
+.ds-247420 .btn-ghost:hover { color: var(--ink); background: var(--green-2); }
 
 /* Input — softened: full border, rounded, 2px default */
 .ds-247420 .input {
@@ -569,11 +564,11 @@
   align-items: baseline;
   gap: var(--space-4);
   padding-bottom: var(--space-2);
-  
+
   font-family: var(--ff-mono);
   font-size: var(--fs-xs);
-  text-transform: uppercase;
-  letter-spacing: var(--tr-label);
+  letter-spacing: 0.02em;
+  color: var(--fg-3);
 }
 .ds-247420 .dateline > * { white-space: nowrap; }
 .ds-247420 .dateline .spread { flex: 1;  align-self: center; }
@@ -592,21 +587,22 @@
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease);
 }
 .ds-247420 .row + .row { margin-top: var(--space-2); margin-bottom: 0; }
-.ds-247420 .row .row-code  { font-family: var(--ff-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--mono-1); }
+.ds-247420 .row .row-code  { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--mono-1); }
 .ds-247420 .row .row-title { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
-.ds-247420 .row .row-meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
-.ds-247420 .row:hover { background: var(--green); color: var(--green-fg); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
-.ds-247420 .row:hover .row-code { color: var(--sun); }
-.ds-247420 .row:hover .row-meta { color: var(--green-fg); }
+.ds-247420 .row .row-meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--fg-3); }
+.ds-247420 .row:hover { background: var(--green-2); color: var(--ink); }
+.ds-247420 .row:hover .row-code { color: var(--green-deep); }
+.ds-247420 .row:hover .row-meta { color: var(--ink); }
 
 /* Soft card — the generic container */
 .ds-247420 .card {
-  
+
   border-radius: var(--r-3);
   background: var(--bg);
   padding: var(--space-5);
+  box-shadow: var(--panel-shadow, none);
 }
-.ds-247420 .card.chunk {  }
+.ds-247420 .card.chunk { }
 
 /* ============================================================
    Selection
@@ -619,33 +615,33 @@
    Light default. Dark via prefers-color-scheme or [data-theme="dark"].
    ============================================================ */
 .ds-247420 {
-  --panel-0:       var(--paper);  /* #EFE9DD canvas */
-  --panel-1:       #f6f1e7;
-  --panel-2:       #ece5d8;
-  --panel-3:       #ddd4c3;
-  --panel-hover:   #e3dccb;
-  --panel-select:  #c9e8c5;
-  --panel-text:    var(--ink);    /* #0B0B09 */
-  --panel-text-2:  #4a473f;
-  --panel-text-3:  #6d675b;
+  --panel-0:       var(--paper);  /* warm canvas */
+  --panel-1:       #FBF6EB;
+  --panel-2:       #F0E9DA;
+  --panel-3:       #E3DAC7;
+  --panel-hover:   #EBE1CD;
+  --panel-select:  #D8ECCB;
+  --panel-text:    var(--ink);
+  --panel-text-2:  #5A5246;
+  --panel-text-3:  #857B6C;
   --panel-accent:    var(--green);
   --panel-accent-2:  var(--green-deep);
   --panel-accent-fg: #ffffff;
-  --panel-shadow:  none;
+  --panel-shadow:  0 1px 2px rgba(31,27,22,0.04);
   --panel-shadow-top: none;
 }
 
 @media (prefers-color-scheme: dark) {
   .ds-247420 {
-    --panel-0:       #131517;
-    --panel-1:       #1b1d20;
-    --panel-2:       #23262a;
-    --panel-3:       #2d3035;
-    --panel-hover:   #2d3035;
-    --panel-select:  #1f3a2a;
-    --panel-text:    #e8eaee;
-    --panel-text-2:  #b6bac1;
-    --panel-text-3:  #868c95;
+    --panel-0:       #1A1B1E;
+    --panel-1:       #232428;
+    --panel-2:       #2B2D31;
+    --panel-3:       #36383E;
+    --panel-hover:   #36383E;
+    --panel-select:  #29402F;
+    --panel-text:    #ECEEF2;
+    --panel-text-2:  #BFC3CB;
+    --panel-text-3:  #92979F;
     --panel-accent:    var(--green-2);
     --panel-accent-2:  var(--green-2);
     --panel-accent-fg: var(--ink);
@@ -655,15 +651,15 @@
 }
 
 .ds-247420 [data-theme="dark"] {
-  --panel-0:       #131517;
-  --panel-1:       #1b1d20;
-  --panel-2:       #23262a;
-  --panel-3:       #2d3035;
-  --panel-hover:   #2d3035;
-  --panel-select:  #1f3a2a;
-  --panel-text:    #e8eaee;
-  --panel-text-2:  #b6bac1;
-  --panel-text-3:  #868c95;
+  --panel-0:       #1A1B1E;
+  --panel-1:       #232428;
+  --panel-2:       #2B2D31;
+  --panel-3:       #36383E;
+  --panel-hover:   #36383E;
+  --panel-select:  #29402F;
+  --panel-text:    #ECEEF2;
+  --panel-text-2:  #BFC3CB;
+  --panel-text-3:  #92979F;
   --panel-accent:    var(--green-2);
   --panel-accent-2:  var(--green-2);
   --panel-accent-fg: var(--ink);
@@ -673,11 +669,11 @@
 
 .ds-247420 [data-theme="light"] {
   --panel-0:       var(--paper);
-  --panel-1:       #f6f1e7;
-  --panel-2:       #ece5d8;
-  --panel-3:       #ddd4c3;
-  --panel-hover:   #e3dccb;
-  --panel-select:  #c9e8c5;
+  --panel-1:       #FBF6EB;
+  --panel-2:       #F0E9DA;
+  --panel-3:       #E3DAC7;
+  --panel-hover:   #EBE1CD;
+  --panel-select:  #D8ECCB;
   --panel-text:    var(--ink);
   --panel-text-2:  #4a473f;
   --panel-text-3:  #6d675b;
@@ -860,22 +856,36 @@
     min-height: 0;
     background: var(--panel-0);
     gap: 0;
+    transition: grid-template-columns var(--motion-fast, 220ms) ease;
+}
+.ds-247420 .app-body.no-side { grid-template-columns: 0 1fr; }
+
+.ds-247420 .app-side-shell {
+    min-width: 0;
+    overflow: hidden;
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity var(--motion-fast, 220ms) ease, transform var(--motion-fast, 220ms) ease;
+}
+.ds-247420 .app-body.no-side .app-side-shell {
+    opacity: 0;
+    transform: translateX(-12px);
+    pointer-events: none;
 }
-.ds-247420 .app-body.no-side { grid-template-columns: 1fr; }
 
 /* Sidebar */
 .ds-247420 .app-side {
     background: var(--panel-0);
     padding: 8px 0 24px 0;
     overflow-y: auto;
+    height: 100%;
 }
 .ds-247420 .app-side .group {
-    padding: 12px 16px 4px 16px;
+    padding: 14px 18px 6px 18px;
     font-family: var(--ff-mono);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--panel-text-2);
+    font-size: 12px;
+    letter-spacing: 0.01em;
+    color: var(--panel-text-3);
     font-weight: 600;
 }
 .ds-247420 .app-side a {
@@ -922,12 +932,11 @@
 }
 .ds-247420 .app-main h3 {
     font-family: var(--ff-mono);
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 600;
     margin: 24px 0 8px 0;
     color: var(--panel-accent);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.01em;
 }
 .ds-247420 .app-main p {
     margin: 0 0 12px 0;
@@ -974,18 +983,19 @@
 /* Panel — grouped content block, flat tonal surface */
 .ds-247420 .panel {
     background: var(--panel-1);
-    border-radius: 16px;
+    border-radius: 20px;
     overflow: hidden;
     margin: 16px 0;
+    box-shadow: var(--panel-shadow, none);
 }
 .ds-247420 .panel-head {
-    padding: 12px 20px;
+    padding: 14px 22px;
     background: var(--panel-1);
     font-family: var(--ff-mono);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+    font-size: 13px;
+    letter-spacing: 0.005em;
     color: var(--panel-text-2);
+    font-weight: 600;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1024,9 +1034,10 @@
 /* List — dense single-line item set, full-bleed. Drop into .app-main directly. */
 .ds-247420 .list {
     background: var(--panel-1);
-    border-radius: 16px;
+    border-radius: 20px;
     overflow: hidden;
     margin: 8px 0;
+    box-shadow: var(--panel-shadow, none);
 }
 .ds-247420 .list-row {
     display: grid;
@@ -1273,9 +1284,8 @@
     background: var(--panel-2);
     color: var(--panel-text-2);
     cursor: pointer;
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+    font-size: 12px;
+    letter-spacing: 0.01em;
     display: flex;
     align-items: center;
 }
@@ -1383,9 +1393,8 @@
 .ds-247420 .kv td:first-child {
     color: var(--panel-text-2);
     font-family: var(--ff-mono);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+    font-size: 12px;
+    letter-spacing: 0.01em;
     width: 160px;
 }
 .ds-247420 .kv td:last-child { color: var(--panel-text); }
@@ -1401,15 +1410,16 @@
     display: grid;
     grid-template-columns: 44px 1fr;
     gap: 10px;
-    padding: 16px 18px;
+    padding: 18px 20px;
     background: var(--panel-1);
     color: var(--panel-text);
     text-decoration: none;
     align-items: baseline;
-    border-radius: 16px;
-    transition: background 80ms ease;
+    border-radius: 20px;
+    box-shadow: var(--panel-shadow, none);
+    transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
 }
-.ds-247420 .card-item:hover { background: var(--panel-hover); }
+.ds-247420 .card-item:hover { background: var(--panel-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31,27,22,0.06); }
 .ds-247420 .card-item .code {
     font-family: var(--ff-mono);
     font-size: 11px;
@@ -1423,6 +1433,15 @@
     color: var(--panel-text);
 }
 
+/* Readability floor across all surfaces */
+.ds-247420 .app-side .group { font-size: 13px; }
+.ds-247420 .app-side a { font-size: 15px; }
+.ds-247420 .app-side a .count { font-size: 13px; }
+.ds-247420 .tabs a { font-size: 15px; }
+.ds-247420 .list-toolbar .count { font-size: 13px; }
+.ds-247420 .list-row .from, .ds-247420 .list-row .subject { font-size: 15px; }
+.ds-247420 .list-row .time, .ds-247420 .label { font-size: 13px; }
+
 /* Scrollbars */
 .ds-247420 ::-webkit-scrollbar { width: 10px; height: 10px; }
 .ds-247420 ::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 5px; }