/* Dark palette and the phone-only editor symbol row. */

/* ---------- dark ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161C;
    --card: #1C1F27;
    --ink: #ECEDF2;
    --ink-2: #C2C6D4;
    --muted: #949AAC;
    --faint: #6E7488;
    --line: #2A2E39;
    --line-2: #23272F;

    --mint: #3E7F68; --mint-deep: #8FD8BB; --mint-soft: #1E3A31;
    --lilac: #4B44869E; --lilac-deep: #B7AEF5; --lilac-soft: #272449;
    --amber: #5A4526; --amber-deep: #E0A458; --amber-soft: #2E2617; --amber-ink: #E8D3AE;
    --blue: #234A5E; --blue-deep: #8FC8E4;
    --rose: #4E2A22; --rose-deep: #EE9B84;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --shadow-2: 0 4px 8px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --bg: #14161C;
  --card: #1C1F27;
  --ink: #ECEDF2;
  --ink-2: #C2C6D4;
  --muted: #949AAC;
  --faint: #6E7488;
  --line: #2A2E39;
  --line-2: #23272F;

  --mint: #3E7F68; --mint-deep: #8FD8BB; --mint-soft: #1E3A31;
  --lilac: #4B4486; --lilac-deep: #B7AEF5; --lilac-soft: #272449;
  --amber: #5A4526; --amber-deep: #E0A458; --amber-soft: #2E2617; --amber-ink: #E8D3AE;
  --blue: #234A5E; --blue-deep: #8FC8E4;
  --rose: #4E2A22; --rose-deep: #EE9B84;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-2: 0 4px 8px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.5);
}

/* Buttons and chips that hard-code ink on light need re-stating in dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { background: #ECEDF2; color: #14161C; }
  :root:not([data-theme="light"]) .btn-primary:hover { background: #FFFFFF; }
  :root:not([data-theme="light"]) .btn-mint { color: #10221B; }
  :root:not([data-theme="light"]) .node.done svg { stroke: #10221B; }
  :root:not([data-theme="light"]) .brand-mark svg { stroke: #10221B; }
  :root:not([data-theme="light"]) .feedback.right .feedback-mark svg { stroke: #10221B; }
  :root:not([data-theme="light"]) .chip-kw { color: #E4E0FF; }
  :root:not([data-theme="light"]) .chip-expr { color: #F3D6AE; }
  :root:not([data-theme="light"]) .feedback.right, 
  :root:not([data-theme="light"]) .feedback.right p { color: #B9DCCB; }
  :root:not([data-theme="light"]) .reveal .codeblock { background: rgba(0, 0, 0, .25); }
  :root:not([data-theme="light"]) .editor textarea::selection { background: rgba(183, 174, 245, .3); }
}

:root[data-theme="dark"] .btn-primary { background: #ECEDF2; color: #14161C; }
:root[data-theme="dark"] .btn-primary:hover { background: #FFFFFF; }
:root[data-theme="dark"] .btn-mint { color: #10221B; }
:root[data-theme="dark"] .node.done svg { stroke: #10221B; }
:root[data-theme="dark"] .brand-mark svg { stroke: #10221B; }
:root[data-theme="dark"] .feedback.right .feedback-mark svg { stroke: #10221B; }
:root[data-theme="dark"] .chip-kw { color: #E4E0FF; }
:root[data-theme="dark"] .chip-expr { color: #F3D6AE; }
:root[data-theme="dark"] .feedback.right,
:root[data-theme="dark"] .feedback.right p { color: #B9DCCB; }
:root[data-theme="dark"] .reveal .codeblock { background: rgba(0, 0, 0, .25); }
:root[data-theme="dark"] .editor textarea::selection { background: rgba(183, 174, 245, .3); }

/* ---------- editor symbol row (phones) ---------- */
.symbols { display: none; }

@media (max-width: 760px) {
  .symbols {
    display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .symbols::-webkit-scrollbar { display: none; }
  .symbols button {
    flex: 0 0 auto; min-width: 44px; height: 44px; border: 0; border-radius: 11px;
    background: var(--card); color: var(--ink-2); box-shadow: 0 1px 2px rgba(26,28,38,.08);
    font-family: var(--mono); font-size: 15px; cursor: pointer;
    transition: transform .2s var(--ease);
  }
  .symbols button:active { transform: scale(.9); }
}