/* ============================================================
   howToChatGPT — design tokens
   Light is the base; dark overrides only the token values.

   The palette is ChatGPT's own: the near-black/near-white greys
   of the product surface (#ffffff / #f9f9f9 / #f4f4f4 in light,
   #212121 / #303030 / #171717 in dark), with OpenAI's green as
   the accent and the older OpenAI indigo as the second series.

   Two adjustments were needed for a text-heavy site rather than
   a chat surface:
     · the accent used for links is darkened to #0b7a5f in light,
       because #10a37f on white is ~2.9:1 and fails WCAG AA for
       body text. The bright #10a37f survives as a fill colour.
     · the page ground is #f9f9f9 with #ffffff cards, so the
       elevated surfaces the components rely on are visible.
   ============================================================ */

:root {
  /* --- brand ------------------------------------------------ */
  --accent:        #0b7a5f;   /* OpenAI green, darkened for text contrast */
  --accent-soft:   #ddf1ea;
  --accent-ink:    #075a46;
  --accent-2:      #5436da;   /* OpenAI indigo, for the second series */
  --accent-2-soft: #e6e2fb;

  /* --- surfaces --------------------------------------------- */
  --bg:            #f9f9f9;
  --bg-elev:       #ffffff;
  --bg-sunken:     #f0f0f0;
  --bg-code:       #f7f7f8;
  --bg-rail:       #f9f9f9;

  /* --- ink -------------------------------------------------- */
  --ink:           #0d0d0d;
  --ink-2:         #3d3d3d;
  --ink-3:         #5d5d5d;
  --ink-4:         #8f8f8f;

  /* --- lines ------------------------------------------------ */
  --line:          #e5e5e5;
  --line-2:        #d9d9d9;
  --line-strong:   #b4b4b4;

  /* --- semantic --------------------------------------------- */
  --ok:            #17805f;
  --ok-soft:       #dcf0e8;
  --warn:          #8a6300;
  --warn-soft:     #faeed0;
  --bad:           #c02929;
  --bad-soft:      #fadcda;
  --info:          #1f6fbf;
  --info-soft:     #dfeaf8;
  --red-team:      #c02929;
  --red-team-soft: #fadcda;
  --blue-team:     #1f6fbf;
  --blue-team-soft:#dfeaf8;

  /* --- type ------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-display: "Inter", var(--font-sans);

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.9rem;
  --fs-3xl:  2.5rem;

  /* --- space / shape ---------------------------------------- */
  --r-sm: 5px;
  --r:    9px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(13,13,13,.06), 0 1px 1px rgba(13,13,13,.04);
  --shadow:    0 4px 14px rgba(13,13,13,.08), 0 1px 3px rgba(13,13,13,.06);
  --shadow-lg: 0 18px 44px rgba(13,13,13,.16), 0 3px 10px rgba(13,13,13,.08);

  --sidebar-w: 268px;
  --rail-w: 236px;
  --content-max: 780px;
  --header-h: 56px;

  color-scheme: light;
}

/* dark = explicit choice, or system preference when nothing is stamped */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* placeholder so the cascade order is predictable; real values below */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:        #19c37d;
    --accent-soft:   #10362a;
    --accent-ink:    #5fe0a8;
    --accent-2:      #a394f7;
    --accent-2-soft: #241d47;

    --bg:            #212121;
    --bg-elev:       #303030;
    --bg-sunken:     #171717;
    --bg-code:       #1a1a1a;
    --bg-rail:       #1c1c1c;

    --ink:           #ececec;
    --ink-2:         #cdcdcd;
    --ink-3:         #a1a1a1;
    --ink-4:         #7d7d7d;

    --line:          #3a3a3a;
    --line-2:        #4a4a4a;
    --line-strong:   #676767;

    --ok:            #45d19a;
    --ok-soft:       #133026;
    --warn:          #e0b048;
    --warn-soft:     #322611;
    --bad:           #f28b8b;
    --bad-soft:      #3a1c1c;
    --info:          #7db6f0;
    --info-soft:     #17263a;
    --red-team:      #f28b8b;
    --red-team-soft: #3a1c1c;
    --blue-team:     #7db6f0;
    --blue-team-soft:#17263a;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --accent:        #19c37d;
  --accent-soft:   #10362a;
  --accent-ink:    #5fe0a8;
  --accent-2:      #a394f7;
  --accent-2-soft: #241d47;

  --bg:            #212121;
  --bg-elev:       #303030;
  --bg-sunken:     #171717;
  --bg-code:       #1a1a1a;
  --bg-rail:       #1c1c1c;

  --ink:           #ececec;
  --ink-2:         #cdcdcd;
  --ink-3:         #a1a1a1;
  --ink-4:         #7d7d7d;

  --line:          #3a3a3a;
  --line-2:        #4a4a4a;
  --line-strong:   #676767;

  --ok:            #45d19a;
  --ok-soft:       #133026;
  --warn:          #e0b048;
  --warn-soft:     #322611;
  --bad:           #f28b8b;
  --bad-soft:      #3a1c1c;
  --info:          #7db6f0;
  --info-soft:     #17263a;
  --red-team:      #f28b8b;
  --red-team-soft: #3a1c1c;
  --blue-team:     #7db6f0;
  --blue-team-soft:#17263a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.6);

  color-scheme: dark;
}