/* Groweber — light / dark theme.
   The page starts in light mode; html[data-theme="dark"] is set before the first paint by the small script
   at the top of every page (choice saved in localStorage "gw-theme"), so there is no white flash.
   - theme-colors.css: every color already used on the site, as variables by role
     (--fg-* texts and icons, --bg-* backgrounds, --bd-* borders, --sh-* shadows), light and dark values.
   - below: the named colors to use for anything new (both themes). */

:root {
  --gw-page: #fafafa;          /* page background */
  --gw-surface: #ffffff;       /* cards, panels, menus */
  --gw-surface-2: #f2f2f2;     /* fields, soft blocks */
  --gw-text: #131311;          /* main text */
  --gw-text-muted: #6f6f6b;    /* secondary text */
  --gw-line: #e4e4e0;          /* borders, separators */
  --gw-ink: #131311;           /* dark blocks and buttons (stay dark in both themes) */
  --gw-on-ink: #fafafa;        /* text on --gw-ink */
  --gw-accent: #c6fd50;        /* lime */
  --gw-on-accent: #131311;     /* text on the lime */
  --gw-danger: #b42318;
  --gw-success: #15803d;
  --gw-shadow: rgba(19, 19, 17, .16);
  --gw-pop: #c6fd50;           /* pop-up windows: lime card */
  --gw-pop-danger: #c9504f;    /* pop-up windows for a risky action (log out, cancel): red card */
  --gw-pop-text: #131311;      /* text on both cards */
  --gw-pop-soft: #ecece8;      /* "My websites" card of a request just received: light grey */
  /* "My website" page: the code editor drawing (dark like VS Code, in both themes) */
  --gw-code-bg: #1e1e1e; --gw-code-side: #252526; --gw-code-bar: #323233; --gw-code-line: #3c3c3c; --gw-code-sel: #37373d;
  --gw-code-text: #d4d4d4; --gw-code-muted: #858585; --gw-code-key: #9cdcfe; --gw-code-str: #ce9178; --gw-code-tag: #4ec9b0; --gw-code-com: #6a9955;
  color-scheme: light;
}
html[data-theme="dark"] {
  --gw-page: #161615;
  --gw-surface: #1d1d1b;
  --gw-surface-2: #242422;
  --gw-text: #ecebe6;
  --gw-text-muted: #a6a6a1;
  --gw-line: #34342f;
  --gw-ink: #0e0e0d;
  --gw-on-ink: #fafafa;
  --gw-accent: #c6fd50;
  --gw-on-accent: #131311;
  --gw-danger: #f87171;
  --gw-success: #4ade80;
  --gw-shadow: rgba(0, 0, 0, .5);
  --gw-pop: #c6fd50;
  --gw-pop-danger: #c9504f;
  --gw-pop-text: #131311;
  --gw-pop-soft: #ecece8;
  /* "My website" page: the code editor drawing (dark like VS Code, in both themes) */
  --gw-code-bg: #1e1e1e; --gw-code-side: #252526; --gw-code-bar: #323233; --gw-code-line: #3c3c3c; --gw-code-sel: #37373d;
  --gw-code-text: #d4d4d4; --gw-code-muted: #858585; --gw-code-key: #9cdcfe; --gw-code-str: #ce9178; --gw-code-tag: #4ec9b0; --gw-code-com: #6a9955;
  color-scheme: dark;
  background: var(--gw-page);
}

/* ---------- sun / moon switch, in the header next to the language switch ---------- */
.gw-theme-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; margin-inline: 8px 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--fg-131311, #131311); cursor: pointer; transition: opacity .15s; }
.gw-theme-btn:hover { opacity: .7; }
.gw-theme-btn svg { width: 19px; height: 19px; }
.gw-theme-btn .gw-moon { display: none; }
html[data-theme="dark"] .gw-theme-btn .gw-sun { display: none; }
html[data-theme="dark"] .gw-theme-btn .gw-moon { display: block; }
.gw-theme-btn.is-mob { width: 34px; height: 34px; margin: 0; margin-inline-start: auto; }
.gw-theme-btn.is-mob + .gw-lang-btn.is-mob { margin-inline-start: 4px; }
/* the colors change smoothly when the theme is switched (not on page load) */
html.gw-theme-anim, html.gw-theme-anim * { transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease !important; }
.gw-theme-btn + .gw-lang-btn { margin-inline-start: 2px; }

/* ---------- images and logos ---------- */
/* Groweber.com logos (SVG, drawn through <use>): in dark mode the ".com" stays dark inside its light box */
html[data-theme="dark"] { --fg-logo-com: #131311; --fg-logo-com-dark: #131311; --fg-logo-com-card: #2a2a27; }

/* ---------- header in dark mode: the small buttons float over every section (lime ones too) ---------- */
html[data-theme="dark"] :is(.gw-theme-btn, .gw-lang-btn) { background: transparent; color: #ecebe6; text-shadow: none; }
/* "Contact us" of the header: no light outline around the dark button */
html[data-theme="dark"] nav a[data-framer-name="Nav"] { --bd-131311: #131311; }
html[data-theme="dark"] .gw-theme-btn svg { filter: none; }

/* brief: the color swatches keep a thin outline on the dark page (black, navy…) */
html[data-theme="dark"] .gw-bf-sw span { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
/* mobile burger (two bars drawn as dark blocks): light bars on the dark page */
html[data-theme="dark"] .framer-ue2r9j-container :is([data-framer-name="Top"], [data-framer-name="Bottom"]) { background-color: #ecebe6 !important; }

/* light backgrounds that stay light (lime…), even when the site script sets them: their texts stay dark */
html[data-theme="dark"] [style*="background-color: var(--bg-b6ef3c"], html[data-theme="dark"] [style*="background-color:var(--bg-b6ef3c"],
html[data-theme="dark"] [style*="background-color: var(--bg-c6fd50"], html[data-theme="dark"] [style*="background-color:var(--bg-c6fd50"] {
  --fg-131311: #131311; --fg-1c1d1a: #1c1d1a; --fg-000000: #000000; --fg-2a2a27: #2a2a27; --fg-41413f: #41413f; --fg-20201d: #20201d; --fg-1c1c1a: #1c1c1a; --fg-52524e: #52524e; --fg-6f6f6b: #6f6f6b; --fg-6c6c6a: #6c6c6a; --bg-fafafa: #fafafa; --bg-ffffff: #ffffff; --bg-f4f4f4: #f4f4f4; --bg-f3f2ea: #f3f2ea; --bg-f2f2f2: #f2f2f2; --bg-eaeaea: #eaeaea; --bg-dfdfdf: #dfdfdf; --bd-131311: #131311; --bd-dfdfdf: #dfdfdf; --bd-e4e4e0: #e4e4e0; --sh-131311: #131311; color: #131311;
}

/* "Meet Groweber" timeline: the hand-drawn arrows under Day 1…5 (dark SVG pictures) turn light */
html[data-theme="dark"] .gw-day i { filter: invert(1); }
/* timeline: the vertical lines between the days stay discreet on the dark page, as in light mode */
html[data-theme="dark"] { --fg-timeline-line: #34342f; }
/* account button: lime with a dark icon on the dark page */
html[data-theme="dark"] .gw-acc-btn { background: var(--gw-accent); box-shadow: none; color: var(--gw-on-accent); }
html[data-theme="dark"] .gw-acc-btn svg { shape-rendering: geometricPrecision; }

/* "My websites": the First Look block inside a project card stays light in dark mode (the cards keep their colours) */
html[data-theme="dark"] .gw-wsc .gw-fl {
  --gw-surface: #ffffff; --gw-surface-2: #f2f2f2; --gw-text: #131311; --gw-text-muted: #6f6f6b; --gw-line: #e4e4e0;
  color-scheme: light;
}