/* ===================================================================
   Skiniks = STYLES (owner 2026-10-05 redesign; was accent palettes 2026-09-27).
   A style changes the site's overall look and feel (corner shapes, border weight and pattern, shadows, the
   interface-label font, a faint neutral texture) and NEVER its colours: the colour theme the user chose, the
   Dark / Rad setting and the colours of the text in their segments all stay exactly as they are whichever style is on.
   So the accent colours below are the SAME for every style (the long-standing Sea Glass values, what most people
   already see), and each body.accent-<name> class only sets the --sk-* shape variables used further down.
   The palindrome text keeps the user's own font choice (--mono, Set sate tastes > font); only interface labels
   follow a style's --sk-ui-font.
   Classes: accent-seaglass (default) / accent-noir / accent-navy / accent-dos / accent-redder / accent-neergreen.
=================================================================== */

/* ── Colours: one set for every style (light, then dark) ── */
body {
  --blue: #1f8a80; --amber: #6d8a2e; --green: #2e9a6a; --purple: #3f8a8a; --pin: #6d8a2e;
  --accent: #1f8a80; --gold: #6d8a2e;
}
body.dark-mode {
  --blue: #4fc2b4; --amber: #a6c85e; --green: #52c890; --purple: #74bcbc; --pin: #a6c85e;
  --accent: #4fc2b4; --gold: #a6c85e;
}

/* ── Shape variables per style ── */
/* Sea Glass Algaes (default): soft, rounded, frosted. The site's own geometry; no overrides below apply to it. */
body.accent-noir {          /* Noir Ion: sharp, flat, precise: hairline borders, square corners, no shadows */
  --sk-r-win: 2px; --sk-r-card: 2px; --sk-r-btn: 2px;
  --sk-bw: 1px; --sk-bs: solid; --sk-shadow: none;
  --sk-ui-font: 'Inter', system-ui, sans-serif; --sk-ls: 0.01em;
  --sk-texture: none;
}
body.accent-navy {          /* Navy Van: nautical / editorial: double-ruled panels, serif labels, crisp lift */
  --sk-r-win: 6px; --sk-r-card: 6px; --sk-r-btn: 5px;
  --sk-bw: 3px; --sk-bs: double; --sk-shadow: 0 2px 0 rgba(0,0,0,0.10), 0 6px 18px rgba(0,0,0,0.08);
  --sk-ui-font: 'PT Serif', Georgia, serif; --sk-ls: 0.02em;
  --sk-texture: repeating-linear-gradient(0deg, rgba(127,127,127,0.035) 0 1px, transparent 1px 28px);
}
body.accent-dos {           /* Sodded DOS: terminal: square, dashed, monospace labels, faint scanlines */
  --sk-r-win: 0; --sk-r-card: 0; --sk-r-btn: 0;
  --sk-bw: 1px; --sk-bs: dashed; --sk-shadow: none;
  --sk-ui-font: 'Courier New', ui-monospace, monospace; --sk-ls: 0;
  --sk-texture: repeating-linear-gradient(0deg, rgba(127,127,127,0.05) 0 1px, transparent 1px 3px);
}
body.accent-redder {        /* Redder: chunky / poster: thick borders, hard offset shadows, heavy labels */
  --sk-r-win: 4px; --sk-r-card: 4px; --sk-r-btn: 4px;
  --sk-bw: 2px; --sk-bs: solid; --sk-shadow: 4px 4px 0 rgba(0,0,0,0.22);
  --sk-ui-font: 'Rubik', system-ui, sans-serif; --sk-ls: 0;
  --sk-texture: none;
}
body.accent-neergreen {     /* Ne'er Green: organic / evergreen: leaf-cut corners, long soft shade, humanist serif, paper grain */
  --sk-r-win: 22px 6px 22px 6px; --sk-r-card: 18px 4px 18px 4px; --sk-r-btn: 12px 3px 12px 3px;
  --sk-bw: 1px; --sk-bs: solid; --sk-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
  --sk-ui-font: 'Lora', Georgia, serif; --sk-ls: 0.01em;
  --sk-texture: radial-gradient(rgba(127,127,127,0.06) 0.6px, transparent 0.8px) 0 0 / 6px 6px;
}

/* ── Applied to the site's chrome for every style but the default ── */
body:not(.accent-seaglass) #app-wrapper { background-image: var(--sk-texture); }
/* Windows and bars */
body:not(.accent-seaglass) :is(.left-col-win, #vocab-panel, #feed-panel.active #feed-sidebar, .notif-box, #prefs-panel,
  #header-left, #header-right, .tb-left, .tb-right, .tb-center, #segments-list-footer, #feed-float-post-wrap, #comp-panel) {
  border-radius: var(--sk-r-win) !important;
  border-width: var(--sk-bw); border-style: var(--sk-bs);
  box-shadow: var(--sk-shadow);
}
/* Cards: posts, replies, Wordbank rows, segments, writing cells */
body:not(.accent-seaglass) :is(#feed-scroll, #pp-posts-list) .fp-card-clip,
body:not(.accent-seaglass) :is(.suggest-item, .entry-card, .seg-box, .fc-cell, .hue-mock-seg) {
  border-radius: var(--sk-r-card) !important;
}
body:not(.accent-seaglass) :is(#feed-scroll, #pp-posts-list) .feed-post > .fp-card-clip { box-shadow: var(--sk-shadow); }
body:not(.accent-seaglass) .seg-box { border-style: var(--sk-bs); }
/* Buttons, tabs, inputs */
body:not(.accent-seaglass) :is(.tb-post-sop-style, .fsd-item, .skiniks-btn, .seg-toggle, .feed-float-tab, .tb-btn, .drawer-tab,
  .search-row input, .search-row select, #tb-trash, .seg-slot) {
  border-radius: var(--sk-r-btn) !important;
}
/* Interface labels (never the palindrome text, which keeps the user's font) */
body:not(.accent-seaglass) :is(.lcw-title, .fsd-item, .fsd-section-label, .feed-float-tab, .tb-post-sop-style, .skiniks-btn,
  .seg-toggle, #prefs-title, .notif-title, .fp-display-name, .fp-handle, .fp-action-btn, .wiv-frame) {
  font-family: var(--sk-ui-font); letter-spacing: var(--sk-ls);
}
body.accent-redder :is(.lcw-title, .fsd-item, .feed-float-tab, .tb-post-sop-style, .fp-display-name) { font-weight: 800; }