@font-face {
      font-family: 'Encode Sans Semi Condensed';
      src: url('fonts/EncodeSansSemiCondensed-Medium.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    :root {
      --color-ivory:       #F5F4F2;
      --color-greige:      #D3CEC7;
      --color-charcoal:    #3A3A3A;
      --color-coral:       #F87268;
      --color-taupe:       #9A8E84;
      --color-ink:         #1A1A1A;
      --color-yellow:      #F5F200;
      --color-pink:        #FF82C0;
      --color-sky:         #38C9F5;
      --color-ivory-deep:  #EDEAE5;
      --color-stone-200:   #C2BCB5;
      --color-stone-400:   #7A7068;
      --color-charcoal-light: #5A5A5A;
      --bg-primary:        #F8F8F8;
      --bg-surface:        var(--color-ivory-deep);
      --bg-inset:          var(--color-greige);
      --bg-dark:           var(--color-ink);
      --bg-dark-surface:   var(--color-charcoal);
      --fg-primary:        var(--color-ink);
      --fg-secondary:      var(--color-stone-400);
      --fg-tertiary:       var(--color-taupe);
      --fg-on-dark:        var(--color-ivory);
      --fg-on-dark-muted:  var(--color-greige);
      --accent:            var(--color-coral);
      --accent-hover:      #D95A50;
      --accent-subtle:     #FBCFCC;
      --border-light:      var(--color-greige);
      --border-mid:        var(--color-taupe);
      --border-dark:       var(--color-charcoal);
      --status-available-fg:  #6B7A5E;
      --status-available-dot: #8A9E78;
      --font-sans:    'Encode Sans Semi Condensed', sans-serif;
      --font-serif:   'Cormorant Garamond', Georgia, serif;
      --font-mono:    'DM Mono', 'Courier New', monospace;
      --text-xs:    0.6875rem;
      --text-sm:    0.8125rem;
      --text-base:  1rem;
      --text-md:    1.125rem;
      --text-lg:    1.375rem;
      --text-xl:    1.75rem;
      --text-2xl:   2.25rem;
      --text-3xl:   3rem;
      --text-4xl:   4rem;
      --text-5xl:   6rem;
      --weight-light:    300;
      --weight-regular:  400;
      --weight-medium:   500;
      --weight-semibold: 600;
      --weight-bold:     700;
      --leading-tight:  1.08;
      --leading-snug:   1.22;
      --leading-normal: 1.55;
      --leading-loose:  1.75;
      --tracking-tight:   -0.025em;
      --tracking-normal:   0em;
      --tracking-wide:     0.05em;
      --tracking-wider:    0.12em;
      --tracking-widest:   0.22em;
      --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
      --dur-fast:    140ms;
      --dur-base:    260ms;
      --dur-slow:    480ms;
      --shadow-sm:    0 1px 4px rgba(26,26,26,0.06);
      --shadow-md:    0 4px 20px rgba(26,26,26,0.09);
      --shadow-lg:    0 12px 48px rgba(26,26,26,0.12);
      --shadow-frame: 3px 3px 0 var(--color-ink);
      --max-width-text: 660px;
      --max-width-wide: 1200px;
      --max-width-full: 1440px;
    }
    body {
      font-family: var(--font-sans);
      background: var(--bg-primary);
      color: var(--fg-primary);
    }
    #root { min-height: 100vh; }
    .tin-footer-link:hover { color: var(--fg-primary) !important; }
    .tin-ghost:hover { opacity: 0.7; }
    .tin-solid:hover { background: var(--color-charcoal) !important; }
    button { cursor: pointer; }
    /* scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--color-greige); border-radius: 3px; }