/* ═══════════════════════════════════════════════════════════
   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".
   ═══════════════════════════════════════════════════════════ */

/* Dark is graphite rather than black. The old palette sat at #0B0B0C with
   panels at #141416 — six points of separation, so cards dissolved into the
   page and every screen read as one flat sheet. These greys are lifted and
   spaced far enough apart that a card is legible as an object, which is what
   makes the frosted panels and the page wash below read as depth. */
:root,
:root[data-theme="dark"]{
  --bg:#141416;          /* page base — the wash in --page-grad sits over it */
  --surface:#232327;     /* cards, panels, bars */
  --surface-2:#2B2B30;   /* inputs, wells */
  --surface-3:#35353B;   /* raised chips, hover */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);

  --fg:#F4F4F3;          /* primary text  — 15.9:1 on --surface */
  --fg-2:#ADADA9;        /* secondary     —  6.9:1 */
  --fg-3:#7E7E82;        /* tertiary      —  4.5:1, still AA */

  /* Emerald falling to deep teal, as on the reference card.
   *
   * Two tokens rather than one, because a gradient cannot be a text colour.
   * --accent is a flat sample from the middle of the ramp and carries every
   * icon, border and label; --accent-grad fills the things that are blocks of
   * colour — buttons, the add control, the active pill.
   *
   * The ramp is kept light enough at its dark end that the same near-black ink
   * clears 4.5:1 across the whole sweep. Pushing the tail to the true depth of
   * the card sank it to 3.7:1, and a button whose text is legible at one end
   * and not the other is worse than a flatter green. */
  --accent:#35B276;      /* actions, active state, text on dark */
  --accent-ink:#04160D;  /* text ON accent — passes at both ends of the ramp */
  --accent-grad:linear-gradient(140deg,#43C285 0%,#2A9E70 48%,#1B8A64 100%);
  --accent-soft:rgba(53,178,118,.15);
  --accent-line:rgba(53,178,118,.45);

  --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 16px 44px rgba(0,0,0,.5);
  --shadow-sm:0 3px 14px rgba(0,0,0,.36);
  --scrim:rgba(0,0,0,.72);
  --reveal:#EDEDEA;      /* the plate a slat wipe resolves to */

  /* The page wash: grey at the top shoulder, black at the foot, with a green
     bloom behind where the content starts. Fixed, so it stays put while a
     long menu scrolls over it rather than sliding away with the cards. */
  --page-grad:
    radial-gradient(1100px 560px at 82% -8%, rgba(63,190,99,.11), transparent 62%),
    radial-gradient(820px 460px at 8% 4%, rgba(255,255,255,.05), transparent 64%),
    linear-gradient(180deg, #212125 0%, #18181B 46%, #0E0E10 100%);
  --page-grain:.032;     /* the tooth over the wash */
  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-grad:linear-gradient(140deg,#0E8A5B 0%,#0A6E48 52%,#075437 100%);
  --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;

  /* Light keeps its paper feel — the same wash at these values would turn it
     grey and muddy, so it gets a whisper of one and no grain at all. */
  --page-grad:
    radial-gradient(1000px 520px at 84% -6%, rgba(11,122,80,.055), transparent 62%),
    linear-gradient(180deg, #FBFBF9 0%, #F5F5F2 100%);
  --page-grain:0;
  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%;
}

/* The wash and its tooth.
 *
 * Both are fixed and sit behind everything: the gradient as the page's own
 * background, the grain as a pinned pseudo-element. Attaching the gradient to
 * the scroll instead would drag the bloom off the top of a long menu, and
 * painting the grain into each panel would tile it at a different offset in
 * every one. z-index:-1 keeps the tooth under content without needing a
 * stacking context on anything else. */
body{
  background:var(--bg);
  background-image:var(--page-grad);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  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;
}

body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--page-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

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;
  }
}