/* ==========================================================================
   Theme overrides. Dark lives in tokens.css as the default.
   ========================================================================== */

[data-theme="light"] {
  --bg:          #f7f8fb;
  --bg-sunken:   #eef0f6;
  --bg-elev:     #ffffff;
  --surface:     #f2f4f9;
  --surface-2:   #e9ecf4;
  --surface-hi:  #ffffff;

  --border:        #dfe3ed;
  --border-strong: #c6ccdb;

  --text:       #161a24;
  --text-dim:   #4d566b;
  --text-faint: #7b8499;

  --accent:          #4f46e5;
  --accent-hover:    #4338ca;
  --accent-active:   #3730a3;
  --accent-soft:     #4f46e514;
  --accent-ring:     #4f46e544;
  --accent-contrast: #ffffff;

  --ok:        #0f9d63;
  --ok-soft:   #0f9d6314;
  --warn:      #b45309;
  --warn-soft: #b4530914;
  --danger:    #d92b4b;
  --danger-soft:#d92b4b14;
  --info:      #0b7fc4;
  --info-soft: #0b7fc414;

  --code-bg:     #fbfcfe;
  --code-border: #dfe3ed;
  --code-gutter: #9aa3b6;
  --code-line-hl:#00000006;

  --tok-key:   #8b1fa9;
  --tok-str:   #0a7a3d;
  --tok-num:   #b1450a;
  --tok-fn:    #1c53c4;
  --tok-cls:   #8a5a00;
  --tok-com:   #71809b;
  --tok-op:    #0a6e8a;
  --tok-punct: #4d566b;
  --tok-regex: #b1450a;
  --tok-prop:  #29313f;

  --selection: #4f46e526;

  --sh-1: 0 1px 2px rgb(16 24 40 / 0.06);
  --sh-2: 0 2px 8px rgb(16 24 40 / 0.08);
  --sh-3: 0 8px 28px rgb(16 24 40 / 0.12);
  --sh-4: 0 20px 60px rgb(16 24 40 / 0.18);
}

/* Warm, low-blue-light theme for evening study. */
[data-theme="sepia"] {
  --bg:          #f4ecdd;
  --bg-sunken:   #e9dfcc;
  --bg-elev:     #fbf5e9;
  --surface:     #f0e7d6;
  --surface-2:   #e7dcc7;
  --surface-hi:  #fdf9f0;

  --border:        #ded1b8;
  --border-strong: #c9b995;

  --text:       #33291b;
  --text-dim:   #61533c;
  --text-faint: #8b7c62;

  --accent:          #a4562a;
  --accent-hover:    #8e4622;
  --accent-active:   #7a3a1c;
  --accent-soft:     #a4562a17;
  --accent-ring:     #a4562a44;
  --accent-contrast: #fdf9f0;

  --ok:        #4f7a2c;
  --ok-soft:   #4f7a2c17;
  --warn:      #97690f;
  --warn-soft: #97690f17;
  --danger:    #a92f31;
  --danger-soft:#a92f3117;
  --info:      #37647f;
  --info-soft: #37647f17;

  --code-bg:     #fbf5e9;
  --code-border: #ded1b8;
  --code-gutter: #a3937a;

  --tok-key:   #8a3d84;
  --tok-str:   #4f7a2c;
  --tok-num:   #a4562a;
  --tok-fn:    #2f5c86;
  --tok-cls:   #8a6512;
  --tok-com:   #8b7c62;
  --tok-op:    #37647f;
  --tok-punct: #61533c;
  --tok-regex: #a4562a;
  --tok-prop:  #33291b;

  --selection: #a4562a26;
}

/* Maximum contrast. Targets WCAG AAA. Colour is never the only signal anywhere. */
[data-theme="contrast"] {
  --bg:          #000000;
  --bg-sunken:   #000000;
  --bg-elev:     #0a0a0a;
  --surface:     #121212;
  --surface-2:   #1c1c1c;
  --surface-hi:  #262626;

  --border:        #4a4a4a;
  --border-strong: #7a7a7a;

  --text:       #ffffff;
  --text-dim:   #e2e2e2;
  --text-faint: #bcbcbc;

  --accent:          #9db4ff;
  --accent-hover:    #c3d0ff;
  --accent-active:   #7f9bff;
  --accent-soft:     #9db4ff26;
  --accent-ring:     #9db4ff88;
  --accent-contrast: #000000;

  --ok:        #5ffbaa;
  --ok-soft:   #5ffbaa22;
  --warn:      #ffd257;
  --warn-soft: #ffd25722;
  --danger:    #ff9aa8;
  --danger-soft:#ff9aa822;
  --info:      #7fd1ff;
  --info-soft: #7fd1ff22;

  --code-bg:     #000000;
  --code-border: #4a4a4a;
  --code-gutter: #bcbcbc;

  --tok-key:   #e9a6ff;
  --tok-str:   #a8f57f;
  --tok-num:   #ffc287;
  --tok-fn:    #9cc4ff;
  --tok-cls:   #ffe08a;
  --tok-com:   #b8c2d4;
  --tok-op:    #a8e9ff;
  --tok-punct: #dfe4ee;
  --tok-regex: #ffb08a;
  --tok-prop:  #ffffff;

  --selection: #9db4ff44;
}

[data-theme="contrast"] .btn,
[data-theme="contrast"] .card,
[data-theme="contrast"] .panel,
[data-theme="contrast"] .chip { border-width: 2px; }
[data-theme="contrast"] :focus-visible { outline-width: 3px; }
[data-theme="contrast"] a { text-decoration: underline; }

/* Larger tap targets and type when the OS asks for it */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 36px; }
  .tab { padding: var(--sp-3) var(--sp-4); }
}