@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/HankenGrotesk-Variable.ttf") format("truetype")}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:100 900;font-display:swap;src:url("/fonts/HankenGrotesk-Italic-Variable.ttf") format("truetype")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/JetBrainsMono-Variable.ttf") format("truetype")}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:100 900;font-display:swap;src:url("/fonts/JetBrainsMono-Italic-Variable.ttf") format("truetype")}
/* Shared StillMade foundations. App and public listing pages use this file. */
:root {
  /* ---------- Raw palette: two anchors + tonal steps ---------- */
  --cream-50:  #FDFAF1;
  --cream-100: #F7F0DB;
  --cream-200: #ECE3C9;
  --cream-300: #DCD2B5;
  --cream-600: #4E483A;

  --ink-50:  #F2F0EC;
  --ink-100: #C9C6BE;
  --ink-300: #4A4843;
  --ink-400: #26241F;
  --ink-500: #16140F;
  --ink-600: #0A0A0A;

  /* The single permitted non-anchor color: focus + the rare highlight. */
  --signal: #E8B23A;
  --signal-dim: rgba(232, 178, 58, 0.15);
  --signal-glow: rgba(232, 178, 58, 0.30);

  /* ---------- Type families ---------- */
  --font-display: "Balgin", "Hanken Grotesk", ui-sans-serif, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font: var(--font-body);

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(72px, 14vw, 220px);
  --fs-display-l:  clamp(56px, 9vw, 144px);
  --fs-display-m:  clamp(40px, 6vw, 96px);
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-body-s: .875rem;
  --fs-caption: .8125rem;
  --fs-micro: .75rem;
  --tr-display: -0.02em;
  --tr-body: -0.005em;
  --tr-micro: 0.08em;
  --lh-display: 0.92;
  --lh-tight: 1.05;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* ---------- Responsive application geometry ----------
     These tokens keep browsing, account, marketplace and modal surfaces on
     one spacing rhythm. Block-owned workspaces can still define their own
     dense editing geometry through their versioned UI contract. */
  --page-gutter: clamp(20px, 3vw, 48px);
  --page-gutter-compact: clamp(16px, 5vw, 24px);
  --page-section-gap: clamp(32px, 5vw, 64px);
  --content-readable: 720px;
  --content-wide: 1440px;
  --control-height: 40px;
  --touch-target: 44px;
  --mobile-dock-height: 66px;
  --z-nav: 30;
  --hover: var(--hover-wash);

  /* ---------- Radii — sharp by default ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;
  --radius-sm: var(--r-2);
  --radius: var(--r-3);
  --radius-lg: var(--r-3);

  /* ---------- Borders ---------- */
  --bw-hair: 0.5px;
  --bw-1: 1px;
  --bw-2: 2px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-reveal: 720ms;
}

/* ============================================================
   Dark mode — the default surface (ink page, cream type)
   ============================================================ */
:root,
[data-mode="dark"] {
  color-scheme: dark;

  /* Neutral charcoal page, panel, raised surface, and recessed controls. */
  --bg:        #101010;
  --bg-elev-1: #232221;
  --bg-elev-2: #33312F;
  --bg-inset:  #171716;

  --fg:        #F3EEE5;
  --fg-muted:  #BBB2A7;
  --fg-subtle: rgba(243, 238, 229, 0.58);
  --fg-on-accent: #191716;

  --border-tok:    #58534D;
  --border-strong: #8B7E6F;
  --divider:       #393735;

  /* Small warm accents; primary actions still use the cream/ink inversion. */
  --signal: #D0AE77;
  --signal-dim: rgba(208, 174, 119, 0.15);
  --signal-glow: rgba(208, 174, 119, 0.30);

  --hover-wash: rgba(247, 240, 219, 0.06);
  --press-wash: rgba(247, 240, 219, 0.12);
  --selection-bg: var(--cream-100);
  --selection-fg: var(--ink-600);

  --shadow-1: 0 1px 0 rgba(247, 240, 219, 0.04) inset,
              0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 1px 0 rgba(247, 240, 219, 0.06) inset,
              0 16px 48px rgba(0, 0, 0, 0.6);

  --scrim-top:    linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0));
  --scrim-bottom: linear-gradient(to top,    rgba(10,10,10,0.85), rgba(10,10,10,0));

  /* ---- App-token remap → StillMade (dark) ---- */
  --bg-primary:    var(--bg);
  --bg-secondary:  var(--bg-elev-1);
  --bg-tertiary:   var(--bg-elev-2);
  --bg-elevated:   var(--bg-elev-1);
  --bg-hover:      #403D3A;
  --border:        var(--border-tok);
  --border-light:  var(--border-strong);
  --accent:        var(--fg);
  --accent-hover:  var(--cream-50);
  --accent-dim:    var(--hover-wash);
  --accent-glow:   rgba(247, 240, 219, 0.22);
  --accent-contrast: var(--bg);
  /* "Stand-out" editor toolbar button — inverts the surface so it pops in both
     themes: cream fill on the dark page; grey fill on the light page. */
  --editor-standout-bg: var(--fg);
  --editor-standout-fg: var(--bg);
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-muted);
  --text-muted:     var(--fg-subtle);
  --success: var(--fg);
  --warning: var(--signal);
  --danger:  var(--signal);
  --shadow:    var(--shadow-1);
  --shadow-lg: var(--shadow-2);
}

/* ============================================================
   Light mode — cream page, ink type
   ============================================================ */
[data-mode="light"] {
  color-scheme: light;

  /* Preserve the established Light accent independently of Dark. */
  --signal: #E8B23A;
  --signal-dim: rgba(232, 178, 58, 0.15);
  --signal-glow: rgba(232, 178, 58, 0.30);

  --bg:        var(--cream-100);
  --bg-elev-1: var(--cream-50);
  --bg-elev-2: var(--cream-200);
  --bg-inset:  var(--cream-200);

  --fg:        var(--ink-600);
  --fg-muted:  var(--cream-600);
  --fg-subtle: rgba(10, 10, 10, 0.38);
  --fg-on-accent: var(--cream-100);

  --border-tok:    rgba(10, 10, 10, 0.10);
  --border-strong: rgba(10, 10, 10, 0.22);
  --divider:       rgba(10, 10, 10, 0.06);

  --hover-wash: rgba(10, 10, 10, 0.05);
  --press-wash: rgba(10, 10, 10, 0.10);
  --selection-bg: var(--ink-600);
  --selection-fg: var(--cream-100);

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
              0 4px 12px rgba(10, 10, 10, 0.06);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 16px 48px rgba(10, 10, 10, 0.10);

  --scrim-top:    linear-gradient(to bottom, rgba(247,240,219,0.9), rgba(247,240,219,0));
  --scrim-bottom: linear-gradient(to top,    rgba(247,240,219,0.9), rgba(247,240,219,0));

  --bg-primary:    var(--bg);
  --bg-secondary:  var(--bg-elev-1);
  --bg-tertiary:   var(--bg-elev-2);
  --bg-elevated:   var(--bg-elev-2);
  --bg-hover:      var(--cream-300);
  --border:        var(--border-tok);
  --border-light:  var(--border-strong);
  --accent:        var(--fg);
  --accent-hover:  var(--ink-500);
  --accent-dim:    var(--hover-wash);
  --accent-glow:   rgba(10, 10, 10, 0.22);
  --accent-contrast: var(--bg);
  /* Light page: the dark-mode toolbar grey (#4A4843) now stands out on cream. */
  --editor-standout-bg: var(--ink-300);
  --editor-standout-fg: var(--cream-100);
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-muted);
  --text-muted:     var(--fg-subtle);
  --success: var(--fg);
  --warning: var(--signal);
  --danger:  var(--signal);
  --shadow:    var(--shadow-1);
  --shadow-lg: var(--shadow-2);
}


/* White — soft gray page, white panels, neutral raised surfaces. */
[data-mode="white"] {
  color-scheme: light;
  --bg: #E9E8E6; --bg-elev-1: #FFFFFF; --bg-elev-2: #EBE9E6; --bg-inset: #F7F6F4;
  --fg: #1A1917; --fg-muted: #615C56; --fg-subtle: #77716B; --fg-on-accent: #FFFFFF;
  --border-tok: #BCB8B2; --border-strong: #978B7D; --divider: #CDC8C2;
  --hover-wash: rgba(0,0,0,.08); --press-wash: rgba(0,0,0,.13);
  --selection-bg: #1A1917; --selection-fg: #FFFFFF;
  --signal: #8E6B46; --signal-dim: rgba(142,107,70,.10); --signal-glow: rgba(142,107,70,.22);
  --shadow-1: 0 1px 3px rgba(0,0,0,.04); --shadow-2: 0 12px 40px rgba(0,0,0,.10);
  --scrim-top: linear-gradient(to bottom,rgba(233,232,230,.9),rgba(233,232,230,0));
  --scrim-bottom: linear-gradient(to top,rgba(233,232,230,.9),rgba(233,232,230,0));
  --bg-primary: var(--bg); --bg-secondary: var(--bg-elev-1); --bg-tertiary: var(--bg-elev-2);
  --bg-elevated: var(--bg-elev-1); --bg-hover: #E0DDD8;
  --border: var(--border-tok); --border-light: var(--border-strong);
  --accent: var(--fg); --accent-hover: #33302C; --accent-dim: var(--hover-wash);
  --accent-glow: rgba(0,0,0,.12); --accent-contrast: var(--bg);
  --editor-standout-bg: #24211D; --editor-standout-fg: #FFFFFF;
  --text-primary: var(--fg); --text-secondary: var(--fg-muted); --text-muted: var(--fg-subtle);
  --success: var(--fg); --warning: var(--signal); --danger: var(--signal);
  --shadow: var(--shadow-1); --shadow-lg: var(--shadow-2);
}

/* Bare icon controls: visible glyph, generous invisible target, no circular chrome. */
button[data-icon-action="true"] {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-width:36px !important; min-height:36px !important; padding:8px !important;
  border:0 !important; border-radius:0 !important; background:transparent !important;
  box-shadow:none !important; color:var(--text-secondary, var(--fg)) !important;
  flex-shrink:0; line-height:1; cursor:pointer;
}
button[data-icon-action="true"]:hover:not(:disabled) {color:var(--text-primary, var(--fg)) !important;}
button[data-icon-action="true"]:focus-visible {outline:2px solid var(--signal) !important;outline-offset:2px;}
button[data-icon-action="true"]:disabled {opacity:.4 !important;cursor:not-allowed;}
button[data-icon-action="true"][aria-pressed="true"] {color:var(--text-primary, var(--fg)) !important;text-decoration:underline;text-underline-offset:5px;}
@media (pointer:coarse) {button[data-icon-action="true"] {min-width:44px !important;min-height:44px !important;}}