/* DM Sans — SIL Open Font License */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens — canonical source. Extension mirrors these under :host in src/styles.css.
 *
 * Dark mode: every color the app paints with is a token defined here, and the
 * @media (prefers-color-scheme: dark) block at the bottom redefines the same
 * names. Nothing else in the codebase needs a dark-mode branch — add new colors
 * as tokens in BOTH blocks, never as literals in app.css. */
:root {
  color-scheme: light dark;

  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;

  /* Brand green */
  --c-header-bg:     #0f2f24;
  --c-primary:       #1f7a3a;
  --c-primary-dark:  #176530;
  --c-primary-mid:   #145f43;
  --c-primary-light: #b7f3c5;
  --c-primary-text:  #102015;
  --c-primary-hover: #9ee8b1;
  --c-primary-active:#83d99b;

  /* Surfaces */
  --c-bg:            #f7f7f4;
  --c-surface:       #fbfcf8;
  --c-surface-raised:#ecece6;
  --c-surface-hover: #f1f5ee;
  --c-surface-image: #eef2eb;
  --c-surface-card:  #ffffff;  /* tables, cards, menus, modals — pure white in light */
  --c-surface-alt:   #f4f4f1;
  --c-surface-sunken:#f3f4f6;
  --c-hover:         #f0f0f0;
  --c-overlay:       rgb(0 0 0 / 45%);
  --c-shadow-rgb:    0 0 0;

  /* Borders */
  --c-border:        #d8d8d2;
  --c-border-light:  #d8dfd5;
  --c-border-mid:    #cfd8cb;
  --c-border-strong: #9dae98;
  --c-border-input:  #aaaaaa;

  /* Text */
  --c-text:          #17201a;
  --c-text-muted:    #51604e;
  --c-text-dim:      #60705d;
  --c-text-label:    #435141;
  --c-text-link:     #1d6132;
  --c-text-on-dark:  #ffffff;   /* text painted on the brand-green header/hero */
  --c-text-on-dark-muted: #cfe6d6;
  --c-text-neutral:  #1a1a1a;   /* editorial copy (about page, toasts) */
  --c-text-neutral-muted: #4a4a4a;

  /* Semantic */
  --c-error:         #b91c1c;
  --c-danger:        #dc2626;
  --c-danger-strong: #dc2626;
  --c-danger-strong-hover: #b91c1c;
  --c-danger-bg:     #fde8e8;
  --c-danger-subtle: #fee2e2;
  --c-danger-hover:  #f8d4d4;
  --c-danger-active: #fbd2d2;
  --c-danger-border: #9b2b2b;
  --c-danger-border-soft: #fca5a5;
  --c-danger-text:   #5c1a1a;
  --c-danger-fg:     #b3261e;   /* danger label on a light menu row */
  --c-danger-fg-bg:  #fce8e6;
  --c-warning:       #b35c00;
  --c-warning-bg:    #fff1d6;
  --c-warning-border:#d6a72e;
  --c-warning-text:  #8a5a00;
  --c-success-bg:    #def2db;
  --c-success-text:  #1f5e1f;
  /* --c-green: the admin console's accent -- active nav, chart lines, focus
     rings. Bright enough to read as an instrument colour on either surface. */
  --c-green:         #1f7a3a;
  --c-info-bg:       #e8f0fe;
  --c-info-border:   #90c8f8;
  --c-info-text:     #1a56c4;
  --c-neutral-bg:    #eeeeee;
  --c-neutral-text:  #555555;
  --c-accent:        #4f7eff;
  --c-room-bg:       #f0f3ed;
  --c-room-border:   #cfd8cb;
  --c-room-text:     #354832;

  /* Code / JSON viewer */
  --c-code-bg:       #f6f8fa;
  --c-code-border:   #e1e4e8;
  --c-json-key:      #005cc5;
  --c-json-str:      #22863a;
  --c-json-bool:     #d73a49;
  --c-json-num:      #e36209;
}

/* Dark mode follows the OS setting. Same token names, darker surfaces,
 * lighter text; the brand green stays the anchor. Scoped to `screen` so
 * printing keeps the light palette above — dark surfaces waste ink. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Brand green */
    --c-header-bg:     #0b241b;
    --c-primary:       #46a862;
    --c-primary-dark:  #63c47f;
    --c-primary-mid:   #57b779;
    --c-primary-light: #1e5c33;
    --c-primary-text:  #e6f7ea;
    --c-primary-hover: #266f3d;
    --c-primary-active:#2f8449;

    /* Surfaces */
    --c-bg:            #121513;
    --c-surface:       #191d1a;
    --c-surface-raised:#232823;
    --c-surface-hover: #242c26;
    --c-surface-image: #1c211d;
    --c-surface-card:  #1b1f1c;
    --c-surface-alt:   #202420;
    --c-surface-sunken:#22271f;
    --c-hover:         #262b26;
    --c-overlay:       rgb(0 0 0 / 68%);
    --c-shadow-rgb:    0 0 0;

    /* Borders */
    --c-border:        #333a34;
    --c-border-light:  #333d35;
    --c-border-mid:    #3c473d;
    --c-border-strong: #5d6d5f;
    --c-border-input:  #4a544b;

    /* Text */
    --c-text:          #e6ebe5;
    --c-text-muted:    #aab7a8;
    --c-text-dim:      #98a696;
    --c-text-label:    #c1cebf;
    --c-text-link:     #7fd39a;
    --c-text-on-dark:  #ffffff;
    --c-text-on-dark-muted: #cfe6d6;
    --c-text-neutral:  #e6ebe5;
    --c-text-neutral-muted: #b3bdb1;

    /* Semantic */
    --c-error:         #f87171;
    --c-danger:        #f87171;
    --c-danger-strong: #b3261e;
    --c-danger-strong-hover: #8f1d17;
    --c-danger-bg:     #3a1c1c;
    --c-danger-subtle: #341a1a;
    --c-danger-hover:  #4a2222;
    --c-danger-active: #542626;
    --c-danger-border: #8c4141;
    --c-danger-border-soft: #7a3a3a;
    --c-danger-text:   #f4a7a7;
    --c-danger-fg:     #f08b84;
    --c-danger-fg-bg:  #3a1f1d;
    --c-warning:       #e0a458;
    --c-warning-bg:    #3b2e14;
    --c-warning-border:#7a5d20;
    --c-warning-text:  #e8c27a;
    --c-success-bg:    #1c3a22;
    --c-success-text:  #96dba6;
    --c-green:         #7fd39a;
    --c-info-bg:       #16273f;
    --c-info-border:   #2f5580;
    --c-info-text:     #8fbcf0;
    --c-neutral-bg:    #2a2f2a;
    --c-neutral-text:  #a8b2a6;
    --c-accent:        #6f97ff;
    --c-room-bg:       #1d241f;
    --c-room-border:   #3c473d;
    --c-room-text:     #b9cbb6;

    /* Code / JSON viewer */
    --c-code-bg:       #171b18;
    --c-code-border:   #2e352f;
    --c-json-key:      #79b8ff;
    --c-json-str:      #85e89d;
    --c-json-bool:     #f97583;
    --c-json-num:      #ffab70;
  }
}