/* Copyright © 2026 Baka Attila Tamás. Minden jog fenntartva / All rights reserved. Lásd / see: LICENSE */
/* ============================================================
   The Sandstone look (v172; themes.php): warm stone and bark: stone-grey
   board, sand-tinted cards, olive-green accent.
   Geist for everything, as in the default look.
   Cards carry the deadline down the left side (v174); the + and the main
   buttons are the accent with dark text where it is pale.

   Everything here is under html[data-skin="sandstone"], so it does nothing in
   any other look. The tokens of style.css are all set again (light, then
   dark), then the shapes that differ. The colours are the design's
   (sampled from its mockups), a few deepened in their own hue to be seen
   (v176: the deadline edges, the bell's count, the buttons, the night's
   priority chips); the people's and the tags' are made in its family from
   the hues of the default look's, each text 4.5:1 or better.
   ============================================================ */

/* ---------- tokens: light ---------- */
html[data-skin="sandstone"] {
  --bg: #edece7;
  --surface: #ffffff;
  --ink: #2d2922;
  --ink-2: #444039;
  --muted: #66635b;
  --line: #e8e7e7;
  --line-strong: #b5b4b2;
  --accent: #59794a;
  --accent-hi: #4e6a41;
  --accent-text: #497343;   /* links, project names */
  --accent-soft: #e8ece6;
  --danger: #9b492f;
  --danger-solid: #966d54;   /* the bell's count (--bell-ink on it) */
  --stripe-none: #eeeeed;   /* no deadline coming up: a quiet edge, as in the default look */
  --ok: #407b45;
  --dl-late: #ae7357;
  --dl-soon: #cdb780;
  --dl-done: #769564;   /* in the done column: the accent (the design gave it the yellow of soon) */
  --urgent-bg: #d9997d;
  --urgent-ink: #2c2c1e;
  --high: #2c2b1c;
  --prio3-bg: #dac48a;
  --low: #69645b;
  --hover: #f3f3f3;
  --soft: #ebe7de;
  --count-bg: #e5e1d8;
  --count-ink: #48443b;
  --hl-bg: #dac48c;
  --hl-ink: #2d2922;
  --soft2: #f9f9f8;
  --panel: #f3f2ed;
  --filter-bar: #f0efeb;
  --desc-bg: #f3f2ed;
  --input-bg: #f9f8f4;
  --on-accent: #ffffff;
  --warn-bg: #f4eddc;
  --warn-line: #e9dcba;
  --danger-soft: #f7e9e2;
  --danger-chip: #9b492f;
  --scroll: #c7c5c0;
  --scroll-hi: #b3b2ac;
  --scroll-board: #bfbdb8;
  --ghost-hover: rgba(45, 41, 34, 0.06);
  --overlay: rgba(83, 80, 73, 0.32);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(45, 41, 34, 0.06), 0 1px 5px rgba(45, 41, 34, 0.04);
  --shadow-up: 0 4px 16px rgba(45, 41, 34, 0.14);
  --shadow-modal: 0 12px 40px rgba(45, 41, 34, 0.2);
  --font:         'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --font-mono:    var(--font);

  /* This look's own */
  --header-bg: #f6f5f1;
  --title-ink: #3b372e;
  --logo-ink: #2d2922;
  --brand-name: #98644c;
  --card-bg: #f9f3eb;
  --card-chip: #e8e4db;
  --card-hover: #f2ece4;
  --card-line: #e7e1d9;
  --bell-ink: #ffffff;
  --check: #d4a88d;
  --bar-1: #b6c4a5;
  --bar-2: #cab49a;
  --focus: #497343;
  /* The swatches (v167; themes.php): soft chips, deep text (6:1 or more). */
  --sw1-bg: #fee0dd; --sw1-fg: #763835;  --sw2-bg: #fee1d0; --sw2-fg: #713e18;  --sw3-bg: #f4e6ca; --sw3-fg: #624905;
  --sw4-bg: #e4eccf; --sw4-fg: #475413;  --sw5-bg: #d6f0da; --sw5-fg: #235a32;  --sw6-bg: #ccf1e9; --sw6-fg: #025a4f;
  --sw7-bg: #cbeff8; --sw7-fg: #075765;  --sw8-bg: #daeafe; --sw8-fg: #294e7c;  --sw9-bg: #e5e5ff; --sw9-fg: #49457b;
  --sw10-bg: #f4e0f9; --sw10-fg: #623c6a;  --sw11-bg: #fedeeb; --sw11-fg: #703753;  --sw12-bg: #e4e8f0; --sw12-fg: #464d5c;
}

/* ---------- tokens: dark ---------- */
html[data-skin="sandstone"][data-theme="dark"] {
  --bg: #1c1b17;
  --surface: #292823;
  --ink: #ece8e0;
  --ink-2: #d2cec5;
  --muted: #aaa69d;
  --line: #42413c;
  --line-strong: #5e5c56;
  --accent: #8eae7c;
  --accent-hi: #9cb88c;
  --accent-text: #a9b99c;
  --accent-soft: rgba(142, 174, 124, 0.22);
  --danger: #df9f94;
  --danger-solid: #d4a88d;
  --stripe-none: #585650;
  --ok: #98c39b;
  --dl-late: #d99a7e;
  --dl-soon: #dbc48c;
  --dl-done: #8eae7c;
  --urgent-bg: #693924;
  --urgent-ink: #ffc1a6;
  --high: #ecd69b;
  --prio3-bg: #54461e;
  --low: #ada69b;
  --hover: #33322c;
  --soft: #34312a;
  --count-bg: #34312a;
  --count-ink: #c3bdaf;
  --hl-bg: #6b5a12;
  --hl-ink: #fff6d6;
  --soft2: #33322c;
  --panel: #201f1b;
  --filter-bar: #2a2925;
  --desc-bg: #201f1b;
  --input-bg: #1a1915;
  --on-accent: #142208;
  --warn-bg: #494436;
  --warn-line: #70664d;
  --danger-soft: rgba(223, 159, 148, 0.16);
  --danger-chip: #df9f94;
  --scroll: #46443f;
  --scroll-hi: #5a5853;
  --scroll-board: #4e4c47;
  --ghost-hover: rgba(236, 232, 224, 0.07);
  --overlay: rgba(8, 8, 7, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-up: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, .55);

  /* This look's own */
  --header-bg: #22211d;
  --title-ink: #dfd7cc;
  --logo-ink: #ece8e0;
  --brand-name: #b27c63;
  --card-bg: #2e271c;
  --card-chip: #36332c;
  --card-hover: #282218;
  --card-line: #373530;
  --bell-ink: #1b1b1c;
  --check: #d4a88d;
  --bar-1: #b6c4a5;
  --bar-2: #c9b499;
  --focus: #a9b99c;
  /* The swatches (v167; themes.php): deep chips, light text (7:1 or more). */
  --sw1-bg: #462e2c; --sw1-fg: #fbcac6;  --sw2-bg: #443024; --sw2-fg: #f6ceb6;  --sw3-bg: #3e341f; --sw3-fg: #e8d5ae;
  --sw4-bg: #333823; --sw4-fg: #d2deb4;  --sw5-bg: #283b2c; --sw5-fg: #bee3c4;  --sw6-bg: #1f3c36; --sw6-fg: #b0e4d9;
  --sw7-bg: #1e3a41; --sw7-fg: #aee2ee;  --sw8-bg: #293648; --sw8-fg: #bfdafd;  --sw9-bg: #333347; --sw9-fg: #d3d3fc;
  --sw10-bg: #3e2f41; --sw10-fg: #e9ccef;  --sw11-bg: #442e38; --sw11-fg: #f6c9dc;  --sw12-bg: #33353b; --sw12-fg: #d2d8e3;
  color-scheme: dark;
}

/* ---------- the header: its own fill and the mark ---------- */
html[data-skin="sandstone"] .toolbar { background: var(--header-bg); border-bottom-color: var(--card-line); }
html[data-skin="sandstone"] .toolbar .filter-bar { background: var(--filter-bar); border-top-color: var(--line); }
/* The name: the default look's face and size (v178; 22px until v177), in the look's ink. */
html[data-skin="sandstone"] .toolbar .brand { color: var(--logo-ink); }
/* The board's name before "Kanban" (v173): the link colour, or the look's own (Sandstone
   the bark brown of its mark, a shade deeper by day and lighter by night since v178 to read
   at regular size). */
html[data-skin="sandstone"] .toolbar .brand-name, html[data-skin="sandstone"] .login h1 .brand-name { color: var(--brand-name); }
html[data-skin="sandstone"] .toolbar .brand::before,
html[data-skin="sandstone"] .login h1::before { background: url("sandstone-mark.svg") center / 26px 26px no-repeat; }
html[data-skin="sandstone"] .user-btn { border: 1px solid var(--card-line); }
html[data-skin="sandstone"] .presence.crowd .pav { box-shadow: 0 0 0 2px var(--header-bg); }

/* ---------- names of things: the default look's type (v179; a step larger until v178), in the titles' ink ---------- */
html[data-skin="sandstone"] .col-head h2, html[data-skin="sandstone"] .agenda-group h2 { color: var(--title-ink); }
html[data-skin="sandstone"] .lane-label { color: var(--title-ink); }

/* ---------- the board ---------- */
/* A card: a thin edge, the deadline's colour down the left side as in the
   default look (v174; a band along the top until v173). The edge is drawn
   with inset shadows, which take no room: the card keeps the default look's
   box, so the lanes line up the same on any screen. (A 1px border made each
   card 2px taller until v185; taking it out of the padding, v186, still left
   a fraction per card where a CSS pixel is not a whole screen pixel, since
   borders are rounded to screen pixels and padding is not. v187.) */
html[data-skin="sandstone"] .card {
  border-left: 4px solid var(--card-color, var(--stripe-none));
  --card-edge: inset 0 1px var(--card-line), inset -1px 0 var(--card-line), inset 0 -1px var(--card-line);
  box-shadow: var(--card-edge), var(--shadow);
}
html[data-skin="sandstone"] .card:hover { box-shadow: var(--card-edge), var(--shadow-up); }

/* The cards on the board and in the calendar: a tint of the look's own (v175;
   the plain surface until v174), dialogs and menus keep the surface. A plain
   tag chip on them is a step off the tint, so it does not melt into it. */
html[data-skin="sandstone"] .card, html[data-skin="sandstone"] .agenda-panel { background: var(--card-bg); }
html[data-skin="sandstone"] .card .tag, html[data-skin="sandstone"] .agenda-panel .tag { background: var(--card-chip); }
html[data-skin="sandstone"] .agenda-row:hover, html[data-skin="sandstone"] .agenda-row:focus-visible { background: var(--card-hover); }

/* An empty lane's outline: the lines are made for the cards, too faint on the board. */
html[data-skin="sandstone"] .cards.lane:empty { border-color: var(--line-strong); }

/* The calendar (v171): each group's panel has the cards' edge; its rows keep
   the colour down the left side (none when nothing is due). */
html[data-skin="sandstone"] .agenda-panel { border: 1px solid var(--card-line); }
html[data-skin="sandstone"] .agenda-head { border-left: 1px solid transparent; border-right: 1px solid transparent; }

/* Chips: Sürgős and Magas solid with dark text, Alacsony an outline; the
   default look's type (v179; bolder until v178). */
html[data-skin="sandstone"] .prio.p1 { background: transparent; color: var(--low); box-shadow: inset 0 0 0 1.5px var(--low); }
html[data-skin="sandstone"] .detail-info .pick-trigger.pp4, html[data-skin="sandstone"] .detail-info .pick-trigger.pp3 { border-color: transparent; }
html[data-skin="sandstone"] .detail-info .pick-trigger.pp1 { background: transparent; color: var(--low); border-color: var(--low); }
/* The bell's count: a small tan square (its figures the default look's type since v179). */
html[data-skin="sandstone"] .toolbar .bell-badge { color: var(--bell-ink); border-radius: 4px; }
html[data-skin="sandstone"] input[type=checkbox], html[data-skin="sandstone"] input[type=radio],
html[data-skin="sandstone"] .chk-item .item-check { accent-color: var(--check); }
html[data-skin="sandstone"] input:focus, html[data-skin="sandstone"] select:focus, html[data-skin="sandstone"] textarea:focus,
html[data-skin="sandstone"] .btn:focus-visible { outline-color: var(--focus); border-color: var(--focus); }

/* ---------- dialogs ---------- */
html[data-skin="sandstone"] .modal { border: 1px solid var(--card-line); }
/* The card's view and editor: its colour down the left side, as on the board. */
html[data-skin="sandstone"] .modal.card-view, html[data-skin="sandstone"] .modal.card-edit { border-left: 4px solid var(--card-color, var(--stripe-none)); }
html[data-skin="sandstone"] .rich blockquote { border-left-color: var(--bar-2); }

/* The checklist's bar: a block per item, the done ones in the look's two
   greens in turn (one plain bar past 20 items, when the blocks would be slivers). */
html[data-skin="sandstone"] .chk-bar { height: 8px; border-radius: 0; background: none; gap: 3px; }
html[data-skin="sandstone"] .chk-bar i { background: var(--soft); border-radius: 1px; }
html[data-skin="sandstone"] .chk-bar i.on { background: var(--bar-1); }
html[data-skin="sandstone"] .chk-bar i.on:nth-child(even) { background: var(--bar-2); }
html[data-skin="sandstone"] .chk-bar.many { gap: 0; }
html[data-skin="sandstone"] .chk-bar.many i.on { background: var(--bar-1); }

/* Beállítások: the looks' cards */
html[data-skin="sandstone"] .theme-card:focus-within { outline-color: var(--focus); }

/* Text and icons that style.css paints in the accent: by night this look's
   accent is a pale fill, too light to read as text, so they take the link colour. */
html[data-skin="sandstone"][data-theme="dark"] .about a,
html[data-skin="sandstone"][data-theme="dark"] .edit-pick .pick-add,
html[data-skin="sandstone"][data-theme="dark"] .card-tag-pick .tag-new,
html[data-skin="sandstone"][data-theme="dark"] .detail-pick .pick-check,
html[data-skin="sandstone"][data-theme="dark"] .toolbar .view-btn.on,
html[data-skin="sandstone"][data-theme="dark"] .toolbar .view-btn.on:hover,
html[data-skin="sandstone"][data-theme="dark"] .card .ticket-link:hover,
html[data-skin="sandstone"][data-theme="dark"] .btn.icon-link.copied,
html[data-skin="sandstone"][data-theme="dark"] .btn.icon-link.copied:hover,
html[data-skin="sandstone"][data-theme="dark"] .view-row .view-star.on,
html[data-skin="sandstone"][data-theme="dark"] .project-link-copy:hover,
html[data-skin="sandstone"][data-theme="dark"] .project-link-copy:focus-visible,
html[data-skin="sandstone"][data-theme="dark"] .btn.project-link-copy.copied,
html[data-skin="sandstone"][data-theme="dark"] .btn.project-link-copy.copied:hover,
html[data-skin="sandstone"][data-theme="dark"] .detail-url a:hover { color: var(--accent-text); }