/* CatchMailNot brand theme — loaded after cmn.css, overrides its tokens.
   Light palette from the product UI (slate surfaces, #0B1727 ink, #00f2c3
   brand cyan, #f59e0b amber for alerts); dark palette mirrors the app's
   dark appearance (#0a0a0f). Dark mode follows the system unless the
   toggle sets data-theme. */

:root {
  color-scheme: light;

  /* base ramps remapped to slate/ink */
  --oi-color-paper-0:      #FFFFFF;
  --oi-color-paper-50:     #F8FAFC;
  --oi-color-paper-100:    #F1F5F9;
  --oi-color-paper-200:    #E2E8F0;
  --oi-color-paper-300:    #CBD5E1;
  --oi-color-sage-200:     #CDF9ED;
  --oi-color-sage-300:     #B3F7E4;
  --oi-color-sage-500:     #35B598;
  --oi-color-sage-700:     #0E7A63;
  --oi-color-graphite-100: #AAB6C6;
  --oi-color-graphite-200: #94A3B8;
  --oi-color-graphite-300: #7A8699;
  --oi-color-graphite-400: #64748B;
  --oi-color-graphite-500: #475569;
  --oi-color-graphite-600: #334155;
  --oi-color-graphite-700: #1E1E2E;
  --oi-color-graphite-800: #0B1727;
  --oi-color-graphite-900: #0A0A0F;
  --oi-color-rust-300:     #00F2C3;
  --oi-color-rust-500:     #0C8F74;
  --oi-color-rust-600:     #0E7A63;
  --oi-color-rust-700:     #0A5C4A;

  /* surfaces */
  --oi-surface-page:       #F8FAFC;
  --oi-surface-card:       #FFFFFF;
  --oi-surface-sunken:     #F1F5F9;
  --oi-surface-panel:      #000000;
  --oi-surface-dark:       #0A0A0F;
  --oi-surface-annotation: rgba(10, 10, 15, 0.8);

  /* text */
  --oi-text-primary:           #0B1727;
  --oi-text-body:              #334155;
  --oi-text-secondary:         #64748B;
  --oi-text-disabled:          #94A3B8;
  --oi-text-inverse:           #FFFFFF;
  --oi-text-inverse-secondary: #94A3B8;
  --oi-text-inverse-tertiary:  #64748B;
  --oi-text-accent:            #0E7A63;
  --oi-text-accent-on-dark:    #00F2C3;

  /* borders */
  --oi-border-grid:    #E2E8F0;
  --oi-border-default: #CBD5E1;
  --oi-border-strong:  #0B1727;

  /* shadows */
  --oi-shadow-card:  0 1px 0 rgba(11, 23, 39, 0.05);
  --oi-shadow-lift:  4px 4px 0 rgba(11, 23, 39, 0.16);
  --oi-shadow-focus: 0 0 0 2px #F8FAFC, 0 0 0 4px #0E7A63;

  /* brand + alert, used by the component overrides below */
  --cmn-brand:       #00F2C3;
  --cmn-brand-hover: #00D9AF;
  --cmn-brand-ink:   #0A0A0F;
  --cmn-alert:       #B45309;
  --cmn-alert-hover: #92400E;
}

/* dark palette, twice: system preference (unless the toggle forced light),
   and the toggle's explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --oi-color-paper-0:      #16161F;
    --oi-color-paper-50:     #0A0A0F;
    --oi-color-paper-100:    #1E1E2E;
    --oi-color-paper-200:    #15151E;
    --oi-color-paper-300:    #2A2A3A;
    --oi-color-sage-200:     #0F3229;
    --oi-color-sage-300:     #123C32;
    --oi-color-sage-500:     #35B598;
    --oi-color-sage-700:     #7DF0D6;
    --oi-color-graphite-100: #475569;
    --oi-color-graphite-200: #64748B;
    --oi-color-graphite-300: #7A8699;
    --oi-color-graphite-400: #94A3B8;
    --oi-color-graphite-500: #AAB6C6;
    --oi-color-graphite-600: #CBD5E1;
    --oi-color-graphite-700: #E2E8F0;
    --oi-color-graphite-800: #F8FAFC;
    --oi-color-graphite-900: #FFFFFF;
    --oi-color-rust-300:     #00F2C3;
    --oi-color-rust-500:     #00F2C3;
    --oi-color-rust-600:     #00F2C3;
    --oi-color-rust-700:     #5CF7D8;

    --oi-surface-page:       #0A0A0F;
    --oi-surface-card:       #16161F;
    --oi-surface-sunken:     #1E1E2E;
    --oi-surface-panel:      #000000;
    --oi-surface-dark:       #090909;
    --oi-surface-annotation: rgba(0, 0, 0, 0.8);

    --oi-text-primary:           #F8FAFC;
    --oi-text-body:              #CBD5E1;
    --oi-text-secondary:         #94A3B8;
    --oi-text-disabled:          #64748B;
    --oi-text-accent:            #00F2C3;

    --oi-border-grid:    #15151E;
    --oi-border-default: #2A2A3A;
    --oi-border-strong:  #F8FAFC;

    --oi-shadow-card:  0 1px 0 rgba(0, 0, 0, 0.4);
    --oi-shadow-lift:  4px 4px 0 rgba(0, 0, 0, 0.55);
    --oi-shadow-focus: 0 0 0 2px #0A0A0F, 0 0 0 4px #00F2C3;

    --cmn-alert: #F59E0B;
    --cmn-alert-hover: #FBBF24;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --oi-color-paper-0:      #16161F;
  --oi-color-paper-50:     #0A0A0F;
  --oi-color-paper-100:    #1E1E2E;
  --oi-color-paper-200:    #15151E;
  --oi-color-paper-300:    #2A2A3A;
  --oi-color-sage-200:     #0F3229;
  --oi-color-sage-300:     #123C32;
  --oi-color-sage-500:     #35B598;
  --oi-color-sage-700:     #7DF0D6;
  --oi-color-graphite-100: #475569;
  --oi-color-graphite-200: #64748B;
  --oi-color-graphite-300: #7A8699;
  --oi-color-graphite-400: #94A3B8;
  --oi-color-graphite-500: #AAB6C6;
  --oi-color-graphite-600: #CBD5E1;
  --oi-color-graphite-700: #E2E8F0;
  --oi-color-graphite-800: #F8FAFC;
  --oi-color-graphite-900: #FFFFFF;
  --oi-color-rust-300:     #00F2C3;
  --oi-color-rust-500:     #00F2C3;
  --oi-color-rust-600:     #00F2C3;
  --oi-color-rust-700:     #5CF7D8;

  --oi-surface-page:       #0A0A0F;
  --oi-surface-card:       #16161F;
  --oi-surface-sunken:     #1E1E2E;
  --oi-surface-panel:      #000000;
  --oi-surface-dark:       #090909;
  --oi-surface-annotation: rgba(0, 0, 0, 0.8);

  --oi-text-primary:           #F8FAFC;
  --oi-text-body:              #CBD5E1;
  --oi-text-secondary:         #94A3B8;
  --oi-text-disabled:          #64748B;
  --oi-text-accent:            #00F2C3;

  --oi-border-grid:    #15151E;
  --oi-border-default: #2A2A3A;
  --oi-border-strong:  #F8FAFC;

  --oi-shadow-card:  0 1px 0 rgba(0, 0, 0, 0.4);
  --oi-shadow-lift:  4px 4px 0 rgba(0, 0, 0, 0.55);
  --oi-shadow-focus: 0 0 0 2px #0A0A0F, 0 0 0 4px #00F2C3;

  --cmn-alert: #F59E0B;
  --cmn-alert-hover: #FBBF24;
}

/* --- component recolors -------------------------------------------------- */

/* primary action is the brand cyan block, as in the product UI; the cyan
   works on both paper and the black panels (13.6:1 against #0a0a0f) */
.oi-btn--primary,
.oi-dark .oi-btn--primary {
  background: var(--cmn-brand);
  color: var(--cmn-brand-ink);
}
.oi-btn--primary:hover { background: var(--cmn-brand-hover); }
.oi-btn--primary[disabled] { background: var(--oi-color-graphite-200); color: var(--oi-color-paper-0); }

/* the paper button sits on the black hero panel; keep it literally light in
   both themes so the dark-mode paper flip doesn't sink it into the panel */
.oi-btn--paper,
.oi-dark .oi-btn--paper { background: #F8FAFC; color: #0B1727; }
.oi-btn--paper:hover { background: #FFFFFF; }

/* alert semantics stay amber (the product's warning hue), not the accent —
   a mint-green "Breached" would read as good news */
.oi-status--alert,
.oi-notice,
.oi-kv__row--alert .oi-kv__value { color: var(--cmn-alert); }
a.oi-status--alert:hover { color: var(--cmn-alert-hover); }

/* components that pair an ink fill with always-white text: in dark mode the
   ink token flips light, so their text must flip with the page instead */
.oi-tabs__tab[aria-selected='true'],
.oi-badge--solid,
.oi-btn--outline:hover { color: var(--oi-surface-page); }
.oi-dark .oi-btn--outline:hover { background: #F8FAFC; color: #0B1727; }

/* --- theme toggle -------------------------------------------------------- */

.theme-toggle {
  width: var(--oi-size-control-md);
  padding-inline: 0;
  flex: none;
}
.theme-toggle svg { display: block; }
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__moon { display: none; }
}