/* Shared design system for micky.sh sites */
/* All sites load this via <link> — changes here affect every site */

:root {
  /* Font stacks */
  --font-mono-stack:  "Geist Mono", "Courier New", ui-monospace, monospace;
  --font-serif-stack: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  /* Per-site accents — each site picks a dark-mode and light-mode variant */
  --c-accent-home-dark:     #ffffff;  /* home    */
  --c-accent-learn-dark:    #67e8f9;  /* learn   */
  --c-accent-courses-dark:  #86efac;  /* courses */
  --c-accent-slides-dark:   #fcd34d;  /* slides  */
  --c-accent-garden-dark:   #fb7185;  /* garden  */

  --c-accent-home-light:    #000000;  /* home    */
  --c-accent-learn-light:   #0e7490;  /* learn   */
  --c-accent-courses-light: #15803d;  /* courses */
  --c-accent-slides-light:  #b45309;  /* slides  */
  --c-accent-garden-light:  #be123c;  /* garden  */

  /* Dark mode tokens (default) */
  --c-bg:              #000;
  --c-text:            #fff;
  --c-sub:             #ccc;
  --c-dim:             #aaa;
  --c-body:            #888;
  --c-meta:            #777;
  --c-faint:           #666;
  --c-muted:           #444;

  --c-surface:         #111;
  --c-surface-deep:    #0a0a0a;
  --c-surface-deepest: #050505;

  --c-line:            #222;
  --c-line-soft:       #1a1a1a;
  --c-line-hard:       #2a2a2a;
  --c-line-accent:     #333;

  --c-accent:          var(--c-accent-home-dark);
  --c-accent-dim:      #aaa;

  --c-success: #4ade80;
  --c-error:   #f87171;
  --c-info:    #4da9a0;
}

/* Light mode — invert text/surfaces and swap in darker accent variants so
 * small accent text remains legible against the #faf9f6 paper background. */
[data-theme="light"] {
  --c-bg:              #faf9f6;
  --c-text:            #1a1a1a;
  --c-sub:             #2a2a2a;
  --c-dim:             #3d3d3d;
  --c-body:            #4a4a4a;
  --c-meta:            #5a5a5a;
  --c-faint:           #6b6b6b;
  --c-muted:           #a8a8a8;

  --c-surface:         #f2efe8;
  --c-surface-deep:    #eeeae2;
  --c-surface-deepest: #e9e4da;

  --c-line:            #dcd9d2;
  --c-line-soft:       #e8e6df;
  --c-line-hard:       #cac6bc;
  --c-line-accent:     #c0bcb2;

  --c-accent-dim:      #999;
}

/* Per-site accent assignment */
[data-site="home"]    { --c-accent: var(--c-accent-home-dark); }
[data-site="learn"]   { --c-accent: var(--c-accent-learn-dark); }
[data-site="courses"] { --c-accent: var(--c-accent-courses-dark); }
[data-site="slides"]  { --c-accent: var(--c-accent-slides-dark); }
[data-site="garden"]  { --c-accent: var(--c-accent-garden-dark); }

[data-theme="light"][data-site="home"]    { --c-accent: var(--c-accent-home-light); }
[data-theme="light"][data-site="learn"]   { --c-accent: var(--c-accent-learn-light); }
[data-theme="light"][data-site="courses"] { --c-accent: var(--c-accent-courses-light); }
[data-theme="light"][data-site="slides"]  { --c-accent: var(--c-accent-slides-light); }
[data-theme="light"][data-site="garden"]  { --c-accent: var(--c-accent-garden-light); }

/* Base reset */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-mono, var(--font-mono-stack));
  font-size: 0.875rem;
  line-height: 1.625;
  transition: background-color 180ms ease, color 180ms ease;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
a:hover,
a:focus-visible { text-decoration-color: var(--link-underline-color, currentColor); }
a:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }

/* Shared top-right theme toggle (rendered by theme.js) */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: var(--theme-toggle-right, 16px);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  color: var(--c-meta);
  background: color-mix(in srgb, var(--c-bg) 70%, transparent);
  border: 1px solid var(--c-line);
  border-radius: 3px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}
.theme-toggle:hover       { color: var(--c-accent); border-color: var(--c-line-hard); }
.theme-toggle .tt-icon    { width: 12px; height: 12px; display: inline-block; }
.theme-toggle .tt-label   { font-feature-settings: "tnum" 1; letter-spacing: 0.04em; }
.theme-toggle[hidden]     { display: none; }