/* ============ my.adhd — shared theme ============
   Loaded by every page before its own stylesheet.
   Palette: Vivid Blue #4737FF on Paper White, Deep Blue #202030 and
   #101018 for night, Stone Gray for secondary text. Branding gradient
   carries the CTAs. Vivid Orange belongs to the logo mark (and the
   mascot's blush) — it is not a UI signal.
   Type: Baloo 2 (variable, 400-800), self-hosted. */

@font-face{
  font-family:"Baloo 2";
  src:url("fonts/Baloo2-Variable.ttf") format("truetype-variations"),
      url("fonts/Baloo2-Variable.ttf") format("truetype");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:light;   /* keep form controls and scrollbars light */

  /* brand */
  --blue:#4737FF;        /* Vivid Blue   */
  --blue-deep:#3529BF;
  --blue-pale:#ACA5FF;
  --pale:#D1CDFF;        /* Pale Blue    */
  --navy:#202030;        /* Deep Blue    */
  --black:#101018;
  --stone:#5E5E6A;       /* Stone Gray   */
  --orange:#F75C03;      /* Vivid Orange */
  --violet:#7B3FE4;      /* logo capsule  */
  --danger:#D92D20;      /* destructive only — never decoration */
  /* The word wears the capsule's colour, in both themes — the lockup reads
     as one object only while the two purples are the same purple. */
  --wordmark-accent:var(--violet);
  --grad:linear-gradient(103deg,#101018 0%,#3529BF 38%,#4737FF 68%,#ACA5FF 100%);

  /* surfaces + text */
  --backdrop:#E9E7FB;
  --backdrop-2:#D9D5F6;
  --surface:#FFFFFF;
  --wash:#F4F3FE;
  --wash-2:#E9E7FD;
  --ink:var(--black);
  --ink-soft:var(--navy);
  --muted:var(--stone);
  --faint:#6B6B7A;   /* AA on white and on --wash: 5.2:1 / 4.8:1 */
  --line:#E4E2F5;
  --line-strong:#CFCBE9;
  --accent:var(--blue);
  --focus:rgba(71,55,255,.18);

  --radius:14px;
  --radius-lg:22px;
  --radius-card:34px;
  --measure:720px;      /* readable column width for the app */
  --ease:cubic-bezier(.22,.9,.28,1);
  --display:"Baloo 2",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* mascot palette.
   The character's own hues are fixed; only the panel behind it moves
   with the theme. That panel is load-bearing — the hair is the same
   value as the dark ground, so removing it erases the silhouette.
   It is muted rather than deleted, so the mascot recedes. */
:root{
  --mx-ink:var(--black);
  --mx-skin:#F2B477;
  --mx-hair:var(--black);
  --mx-tee:var(--navy);
  --mx-blush:var(--orange);
  --mx-bg:#E4E1F7;      /* pale on light */
  --mx-mark:#BDB7E8;
  /* On white the ground draws the silhouette for free. */
  --mx-rim:none;
}


/* tokens the app paints accent-coloured chrome with. Split out so the
   dark scheme can flip the text on top of them — white on a light
   lavender accent is unreadable. */
:root{
  --on-accent:#FFFFFF;
  /* --danger is the button fill and carries white text at 4.8:1 on both
     grounds, so it does not move. Red as *text* is the part that fails on
     a dark page, hence a separate ink. */
  --danger-ink:var(--danger);
  --danger-wash:rgba(217,45,32,.06);
  --danger-edge:rgba(217,45,32,.32);
  --toast-bg:var(--navy);
  --toast-ink:#FFFFFF;
  --mx-strand:#2E2E42;
  --mx-lens:#FFFFFF;
  --mx-lens-alpha:.13;
}

/* ============ night ============
   Only the values move; every selector in the app already reads a token.
   The palette is defined once in a custom property block and applied by
   both the explicit toggle and the system preference. Brand blue is far
   too dark to sit on #101018, so the accent lifts to the pale blue and
   text on top of it goes back to near-black. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --grad:linear-gradient(103deg,#2A1FA6 0%,#3F30E8 38%,#6558FF 68%,#ACA5FF 100%);

    --backdrop:#15151F;
    --backdrop-2:#1D1D2B;
    --surface:#101018;
    --wash:#1A1A26;
    --wash-2:#232333;
    --ink:#F3F2FB;
    --ink-soft:#D6D4EA;
    --muted:#9A98AC;
    --faint:#8B8AA0;
    --line:#262636;
    --line-strong:#3B3A52;
    --accent:#8B7DFF;
    --focus:rgba(139,125,255,.26);

    --on-accent:#101018;
    --danger-ink:#FF8A7E;
    --danger-wash:rgba(255,138,126,.10);
    --danger-edge:rgba(255,138,126,.38);
    --toast-bg:#2A2A3E;
    --toast-ink:#F3F2FB;

    --mx-bg:#26263A;
    --mx-mark:#3D3C58;
    --mx-hair:#0B0B12;
    --mx-tee:#3A3A5C;
    --mx-strand:#5A5878;
    --mx-lens:#0B0B12;
    --mx-lens-alpha:.28;
    /* The hair is a near-black mass with no outline of its own — on the
       thinking screen, which has no panel behind it, it sits on a ground
       of the same value and disappears. No single fill clears both the
       page and the panel, so the edge is drawn instead: two stacked
       shadows trace the union of the hair and its seven curls as one
       contour, where stroking them individually would draw the
       overlapping circles straight through the middle of the hair. */
    --mx-rim:drop-shadow(0 0 1.2px rgba(174,167,232,.48))
             drop-shadow(0 0 3.5px rgba(174,167,232,.20));
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --grad:linear-gradient(103deg,#2A1FA6 0%,#3F30E8 38%,#6558FF 68%,#ACA5FF 100%);

  --backdrop:#15151F;
  --backdrop-2:#1D1D2B;
  --surface:#101018;
  --wash:#1A1A26;
  --wash-2:#232333;
  --ink:#F3F2FB;
  --ink-soft:#D6D4EA;
  --muted:#9A98AC;
  --faint:#8B8AA0;
  --line:#262636;
  --line-strong:#3B3A52;
  --accent:#8B7DFF;
  --focus:rgba(139,125,255,.26);

  --on-accent:#101018;
  --danger-ink:#FF8A7E;
  --danger-wash:rgba(255,138,126,.10);
  --danger-edge:rgba(255,138,126,.38);
  --toast-bg:#2A2A3E;
  --toast-ink:#F3F2FB;

  --mx-bg:#26263A;
  --mx-mark:#3D3C58;
  --mx-hair:#0B0B12;
  --mx-tee:#3A3A5C;
  --mx-strand:#5A5878;
  --mx-lens:#0B0B12;
  --mx-lens-alpha:.28;
  --mx-rim:drop-shadow(0 0 1.2px rgba(174,167,232,.48))
           drop-shadow(0 0 3.5px rgba(174,167,232,.20));
}

/* ============ the brand lockup ============
   Defined once. It used to live in both landing.css and styles.css, which
   is how the app ended up a pixel tighter than the landing page. */
/* The asterisk spans 18-82 of its 100-unit viewBox, so the ink starts
   --logo-bearing in from the edge of the box. A lockup sitting flush on the
   gutter therefore *looks* inset by that much — which is why the toggle,
   whose ring has no such bearing, read as closer to the screen edge than
   the mark did even though both measured the same 20px. */
:root{--logo-size:26px; --logo-bearing:calc(var(--logo-size) * .18)}
.logo{width:var(--logo-size); height:var(--logo-size); flex:none; display:block}
.lg-star{fill:var(--orange)}
.lg-pill{stroke:var(--violet)}
.wordmark{font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-.03em; color:var(--ink)}
.wordmark .accent{color:var(--wordmark-accent)}
.brand-lockup{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; border-radius:8px}
.brand-lockup:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
@media (hover:hover){ .brand-lockup:hover .wordmark{color:var(--accent)} }

/* ---------- day / night ----------
   A round icon button that shows where a click takes you: a moon while
   the page is light, a sun while it is dark. */
.theme-toggle{
  /* the mark's optical bearing, given back to the other end of the bar */
  margin-right:var(--logo-bearing);
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  background:none; border:1.5px solid var(--line-strong); border-radius:999px;
  color:var(--muted); cursor:pointer; padding:0;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent); background:var(--wash)}
.theme-toggle:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus)}
.theme-toggle svg{width:17px; height:17px; display:block}
.theme-toggle .t-sun{display:none}
:root[data-theme="dark"] .theme-toggle .t-sun{display:block}
:root[data-theme="dark"] .theme-toggle .t-moon{display:none}