/* ═══════════════════════════════════════════════════════════
   1718 Coffee — design tokens

   Type:  Clash Display (headings) · Satoshi (UI) · JetBrains Mono (labels)
   No serif, no italics anywhere.

   Both themes define the SAME variable names, so every component is
   written once. `--bg` reads as "app background", not "dark".
   ═══════════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"]{
  --bg:#0B0B0C;          /* page */
  --surface:#141416;     /* cards, panels, bars */
  --surface-2:#1B1B1E;   /* inputs, wells */
  --surface-3:#26262A;   /* raised chips, hover */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);

  --fg:#F5F5F4;          /* primary text  — 17.8:1 on --bg */
  --fg-2:#A8A8A5;        /* secondary     —  7.4:1 */
  --fg-3:#78787A;        /* tertiary      —  4.6:1, still AA */

  --accent:#3ECF8E;      /* actions, active state */
  --accent-ink:#04150D;  /* text ON accent */
  --accent-soft:rgba(62,207,142,.14);
  --accent-line:rgba(62,207,142,.42);

  --warn:#F5A623;
  --warn-soft:rgba(245,166,35,.14);
  --danger:#F4655A;
  --danger-soft:rgba(244,101,90,.14);
  --info:#63A2FF;
  --info-soft:rgba(99,162,255,.14);

  --shadow:0 12px 38px rgba(0,0,0,.55);
  --shadow-sm:0 3px 12px rgba(0,0,0,.4);
  --scrim:rgba(0,0,0,.72);
  --reveal:#EDEDEA;      /* the plate a slat wipe resolves to */
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --surface-2:#F2F2EF;
  --surface-3:#E7E7E3;
  --line:rgba(16,16,14,.10);
  --line-2:rgba(16,16,14,.20);

  --fg:#16160F;          /* 16.9:1 on --bg */
  --fg-2:#55554E;        /*  7.6:1 */
  --fg-3:#7C7C74;        /*  4.6:1 */

  --accent:#0B7A50;      /* darker so white text on it passes AA */
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(11,122,80,.11);
  --accent-line:rgba(11,122,80,.34);

  --warn:#9A5B00;
  --warn-soft:rgba(154,91,0,.11);
  --danger:#C0362B;
  --danger-soft:rgba(192,54,43,.10);
  --info:#1F55B8;
  --info-soft:rgba(31,85,184,.10);

  --shadow:0 12px 34px rgba(28,26,20,.13);
  --shadow-sm:0 2px 10px rgba(28,26,20,.09);
  --scrim:rgba(24,24,20,.46);
  --reveal:#16160F;
  color-scheme:light;
}

:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --tap:120ms;                     /* interaction feedback budget */

  --display:'Clash Display','Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Satoshi','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;
  --rail:84px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  /* 100vh on a phone means "viewport with the URL bar hidden", so a fixed
     app shell gets pushed under the browser chrome and the bottom nav ends
     up off screen. dvh tracks the space that is actually visible. */
  height:100vh;
  height:100dvh;
  overflow:hidden;                 /* the shell owns scrolling */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;}
input,select,textarea{font:inherit;background:none;border:none;color:inherit;outline:none;}
img{display:block;max-width:100%;}
::selection{background:var(--accent);color:var(--accent-ink);}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.1;}

/* the micro-label used throughout */
.mono{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:5px;}
*::-webkit-scrollbar-thumb:hover{background:var(--line-2);}

.hidden{display:none !important;}

/* ══════ THEME TOGGLE ══════ */
.theme-btn{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--fg-2);
  border:1px solid var(--line);background:var(--surface-2);
  transition:color var(--tap) var(--ease),background var(--tap) var(--ease),
             transform var(--tap) var(--ease);
}
.theme-btn:active{transform:scale(.9);}
.theme-btn:hover{color:var(--fg);}
.theme-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;}
.theme-btn .i-sun{display:none;}
:root[data-theme="light"] .theme-btn .i-sun{display:block;}
:root[data-theme="light"] .theme-btn .i-moon{display:none;}

/* Colours cross-fade on a theme flip; transforms stay instant. */
.theming *,.theming *::before,.theming *::after{
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),fill .3s var(--ease) !important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}