@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Nomoscope light theme ──────────────────────────────────────────── */
[data-theme=nomoscope] {
  /* Primary — Nomoscope blue #2b4d8c */
  --color-primary:           #2b4d8c;
  --color-primary-contrast:  #ffffff;
  --color-primary-dark-1:    #1e3870;
  --color-primary-dark-2:    #162a54;
  --color-primary-dark-3:    #0f1f40;
  --color-primary-dark-4:    #0a1530;
  --color-primary-dark-5:    #060e20;
  --color-primary-dark-6:    #040a18;
  --color-primary-dark-7:    #020510;
  --color-primary-light-1:   #3a5fa0;
  --color-primary-light-2:   #4a72b4;
  --color-primary-light-3:   #5a84c8;
  --color-primary-light-4:   #6a97dc;
  --color-primary-light-5:   #7aaaf0;
  --color-primary-light-6:   #c5d5f0;
  --color-primary-light-7:   #e2eaf8;
  --color-primary-alpha-10:  #2b4d8c1a;
  --color-primary-alpha-20:  #2b4d8c33;
  --color-primary-alpha-30:  #2b4d8c4d;
  --color-primary-alpha-40:  #2b4d8c66;
  --color-primary-alpha-50:  #2b4d8c80;
  --color-primary-alpha-60:  #2b4d8c99;
  --color-primary-alpha-70:  #2b4d8cb3;
  --color-primary-alpha-80:  #2b4d8ccc;
  --color-primary-alpha-90:  #2b4d8ce6;
  --color-primary-hover:     #1e3870;
  --color-primary-active:    #162a54;

  /* Secondary — warm neutral */
  --color-secondary:          #e8e4dc;
  --color-secondary-dark-1:   #e8e4dc;
  --color-secondary-dark-2:   #dedad0;
  --color-secondary-dark-3:   #dedad0;
  --color-secondary-dark-4:   #cac3b6;
  --color-secondary-dark-5:   #cac3b6;
  --color-secondary-dark-6:   #b8b0a2;
  --color-secondary-dark-7:   #b8b0a2;
  --color-secondary-dark-8:   #938c7e;
  --color-secondary-dark-9:   #938c7e;
  --color-secondary-dark-10:  #6e6760;
  --color-secondary-dark-11:  #6e6760;
  --color-secondary-dark-12:  #4a4540;
  --color-secondary-dark-13:  #4a4540;
  --color-secondary-light-1:  #e8e4dc;
  --color-secondary-light-2:  #f0ede6;
  --color-secondary-light-3:  #f0ede6;
  --color-secondary-light-4:  #f8f6f1;
  --color-secondary-alpha-10: #e8e4dc1a;
  --color-secondary-alpha-20: #e8e4dc33;
  --color-secondary-alpha-30: #e8e4dc4d;
  --color-secondary-alpha-40: #e8e4dc66;
  --color-secondary-alpha-50: #e8e4dc80;
  --color-secondary-alpha-60: #e8e4dc99;
  --color-secondary-alpha-70: #e8e4dcb3;
  --color-secondary-alpha-80: #e8e4dccc;
  --color-secondary-alpha-90: #e8e4dce6;
  --color-secondary-hover:    #dedad0;
  --color-secondary-active:   #cac3b6;

  /* Backgrounds */
  --color-body:               #f8f6f1;
  --color-box-header:         #f0ede6;
  --color-box-body:           #faf9f7;
  --color-box-body-highlight: #e8e4dc;

  /* Text */
  --color-text-dark:          #1a1a2e;
  --color-text:               #1a1a2e;
  --color-text-light:         #4a5568;
  --color-text-light-1:       #556070;
  --color-text-light-2:       #5c6878;
  --color-text-light-3:       #8896a5;
  --color-text-focus:         #ffffff;
  --color-placeholder-text:   #8896a5;
  --color-caret:              #1a1a2e;

  /* Inputs */
  --color-input-text:               #1a1a2e;
  --color-input-background:         #ffffff;
  --color-input-toggle-background:  #ffffff;
  --color-input-border:             rgba(0,0,0,0.15);
  --color-input-border-hover:       rgba(0,0,0,0.25);

  /* Navigation / header */
  --color-header-wrapper:             #f8f6f1;
  --color-header-wrapper-transparent: #f8f6f100;
  --color-nav-bg:                     #f0ede6;
  --color-nav-hover-bg:               #e8e4dc;
  --color-secondary-nav-bg:           #f8f6f1;

  /* Surfaces */
  --color-hover:        #e8e4dcaa;
  --color-active:       #e0dbd3;
  --color-menu:         #f0ede6;
  --color-card:         #faf9f7;
  --fancy-card-bg:      #f0ede6;
  --fancy-card-border:  #e8e4dc;
  --color-secondary-bg: #f0ede6;
  --color-footer:       #f0ede6;
  --color-timeline:     #e8e4dc;

  /* Borders / shadows */
  --color-light-border:         rgba(0,0,0,0.10);
  --color-shadow:               rgba(0,0,0,0.12);
  --color-light:                #ffffffcc;
  --color-light-mimic-enabled:  rgba(0,0,0,0.08);

  /* Code / markup */
  --color-markup-table-row:   #00000006;
  --color-markup-code-block:  #f0ede6;
  --color-markup-code-inline: #e8e4dc;
  --color-code-bg:            #faf9f7;
  --color-button:             #e8e4dc;
  --color-expand-button:      #e0dbd3;
  --color-editor-line-highlight: #f0ede6;

  /* Labels / reactions */
  --color-label-text:         #1a1a2e;
  --color-label-bg:           #cac3b67b;
  --color-label-hover-bg:     #cac3b6a0;
  --color-label-active-bg:    #cac3b6ff;
  --color-label-bg-alt:       #cac3b6ff;
  --color-reaction-bg:        rgba(0,0,0,0.06);
  --color-reaction-active-bg: #2b4d8c33;
  --color-reaction-hover-bg:  #2b4d8c4d;

  /* Accent / highlight */
  --color-accent:         #3a5fa0;
  --color-small-accent:   #7aaaf0;
  --color-highlight-fg:   #6a97dc;
  --color-highlight-bg:   #c5d5f0;

  /* Tooltips / overlays / selection */
  --color-tooltip-text:      #ffffff;
  --color-tooltip-bg:        rgba(26,26,46,0.95);
  --color-overlay-backdrop:  rgba(8,8,8,0.75);
  --color-selection-bg:      #4a5568;
  --color-selection-fg:      #ffffff;

  /* Project boards */
  --color-project-board-bg:         #f0ede6;
  --color-project-board-dark-label: #8896a5;

  /* Console */
  --color-console-fg:        #eeeff2;
  --color-console-fg-subtle: #959cab;
  --color-console-bg:        #1f212b;
  --color-console-border:    #383c47;
  --color-console-hover-bg:  #ffffff16;
  --color-console-active-bg: #454a57;
  --color-console-menu-bg:   #383c47;
  --color-console-menu-border: #5c6374;

  /* Semantic colors */
  --color-red:    #dc2626;
  --color-orange: #ea580c;
  --color-yellow: #ca8a04;
  --color-olive:  #91a313;
  --color-green:  #15803d;
  --color-teal:   #0d9488;
  --color-blue:   #2563eb;
  --color-violet: #7c3aed;
  --color-purple: #9333ea;
  --color-pink:   #db2777;
  --color-brown:  #a47252;
  --color-grey:   #4b5563;
  --color-black:  #000000;
  --color-white:  #ffffff;
  --color-gold:   #b1983b;

  --color-red-light:    #ef4444;
  --color-orange-light: #f97316;
  --color-yellow-light: #eab308;
  --color-olive-light:  #839311;
  --color-green-light:  #16a34a;
  --color-teal-light:   #14b8a6;
  --color-blue-light:   #3b82f6;
  --color-violet-light: #8b5cf6;
  --color-purple-light: #a855f7;
  --color-pink-light:   #ec4899;
  --color-brown-light:  #94674a;
  --color-grey-light:   #6b7280;
  --color-black-light:  #181818;

  --color-red-dark-1:    #c82020;
  --color-orange-dark-1: #d34f0b;
  --color-yellow-dark-1: #b67c04;
  --color-olive-dark-1:  #839311;
  --color-green-dark-1:  #137337;
  --color-teal-dark-1:   #0c857a;
  --color-blue-dark-1:   #1554e0;
  --color-violet-dark-1: #6a1feb;
  --color-purple-dark-1: #8519e7;
  --color-pink-dark-1:   #c7216b;
  --color-brown-dark-1:  #94674a;
  --color-black-dark-1:  #000000;

  --color-red-dark-2:    #b21d1d;
  --color-orange-dark-2: #bb460a;
  --color-yellow-dark-2: #a26e03;
  --color-olive-dark-2:  #74820f;
  --color-green-dark-2:  #116631;
  --color-teal-dark-2:   #0a766d;
  --color-blue-dark-2:   #124bc7;
  --color-violet-dark-2: #5c14d8;
  --color-purple-dark-2: #7715cf;
  --color-pink-dark-2:   #b11d5f;
  --color-brown-dark-2:  #835b42;
  --color-black-dark-2:  #000000;

  /* Diff */
  --color-diff-removed-word-bg:  #fca5a5;
  --color-diff-added-word-bg:    #86efac;
  --color-diff-removed-row-bg:   #fee2e2;
  --color-diff-moved-row-bg:     #fef9c3;
  --color-diff-added-row-bg:     #dcfce7;
  --color-diff-removed-row-border: #fca5a5;
  --color-diff-moved-row-border:   #fde047;
  --color-diff-added-row-border:   #86efac;
  --color-diff-inactive:           #f0ede6;

  /* Alerts */
  --color-error-border:    #fecaca;
  --color-error-bg:        #fee2e2;
  --color-error-bg-active: #fca5a5;
  --color-error-bg-hover:  #fecaca;
  --color-error-text:      #7f1d1d;
  --color-success-border:  #bbf7d0;
  --color-success-bg:      #dcfce7;
  --color-success-text:    #14532d;
  --color-warning-border:  #fde047;
  --color-warning-bg:      #fef3c7;
  --color-warning-text:    #78350f;
  --color-info-border:     #bae6fd;
  --color-info-bg:         #e0f2fe;
  --color-info-text:       #0c4a6e;

  /* Badges */
  --color-red-badge:          #b91c1c;
  --color-red-badge-bg:       #b91c1c22;
  --color-red-badge-hover-bg: #b91c1c44;
  --color-green-badge:          #16a34a;
  --color-green-badge-bg:       #16a34a22;
  --color-green-badge-hover-bg: #16a34a44;
  --color-yellow-badge:          #ca8a04;
  --color-yellow-badge-bg:       #ca8a0422;
  --color-yellow-badge-hover-bg: #ca8a0444;
  --color-orange-badge:          #ea580c;
  --color-orange-badge-bg:       #ea580c22;
  --color-orange-badge-hover-bg: #ea580c44;

  /* ANSI */
  --color-ansi-black:          #1f2326;
  --color-ansi-red:            #cc4848;
  --color-ansi-green:          #87ab63;
  --color-ansi-yellow:         #cc9903;
  --color-ansi-blue:           #3a8ac6;
  --color-ansi-magenta:        #d22e8b;
  --color-ansi-cyan:           #00918a;
  --color-ansi-white:          #959cab;
  --color-ansi-bright-black:   #46494d;
  --color-ansi-bright-red:     #d15a5a;
  --color-ansi-bright-green:   #93b373;
  --color-ansi-bright-yellow:  #eaaf03;
  --color-ansi-bright-blue:    #4e96cc;
  --color-ansi-bright-magenta: #d74397;
  --color-ansi-bright-cyan:    #00b6ad;
  --color-ansi-bright-white:   #eeeff2;

  /* Indicators */
  --color-indicator-offline:    #52525b;
  --color-indicator-offline-20: #52525b33;
  --color-indicator-idle:       #16a34a;
  --color-indicator-idle-20:    #16a34a33;
  --color-indicator-active:     #2185d0;
  --color-indicator-active-20:  #2185d033;

  /* Checkerboard */
  --checkerboard-color-1: #ffffff;
  --checkerboard-color-2: #e5e5e5;

  accent-color: #2b4d8c;
  color-scheme: light;
}

/* ── Nomoscope dark theme ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme=nomoscope] {
    --is-dark-theme: true;

    /* Primary — Nomoscope blue #7096d4 */
    --color-primary:           #7096d4;
    --color-primary-contrast:  #000000;
    --color-primary-dark-1:    #8aaee8;
    --color-primary-dark-2:    #9abff0;
    --color-primary-dark-3:    #aaccf6;
    --color-primary-dark-4:    #bad9ff;
    --color-primary-dark-5:    #c8e2ff;
    --color-primary-dark-6:    #d6ebff;
    --color-primary-dark-7:    #e4f2ff;
    --color-primary-light-1:   #5a80be;
    --color-primary-light-2:   #4469a8;
    --color-primary-light-3:   #2e5292;
    --color-primary-light-4:   #1e3870;
    --color-primary-light-5:   #162a54;
    --color-primary-light-6:   #0f1f40;
    --color-primary-light-7:   #0a1530;
    --color-primary-alpha-10:  #7096d41a;
    --color-primary-alpha-20:  #7096d433;
    --color-primary-alpha-30:  #7096d44d;
    --color-primary-alpha-40:  #7096d466;
    --color-primary-alpha-50:  #7096d480;
    --color-primary-alpha-60:  #7096d499;
    --color-primary-alpha-70:  #7096d4b3;
    --color-primary-alpha-80:  #7096d4cc;
    --color-primary-alpha-90:  #7096d4e6;
    --color-primary-hover:     #8aaee8;
    --color-primary-active:    #9abff0;

    /* Secondary — dark navy */
    --color-secondary:          #242d3a;
    --color-secondary-dark-1:   #2e3849;
    --color-secondary-dark-2:   #384558;
    --color-secondary-dark-3:   #425266;
    --color-secondary-dark-4:   #4c5f75;
    --color-secondary-dark-5:   #566c84;
    --color-secondary-dark-6:   #607993;
    --color-secondary-dark-7:   #6a86a2;
    --color-secondary-dark-8:   #7a96b2;
    --color-secondary-dark-9:   #8aaac2;
    --color-secondary-dark-10:  #9ab9d0;
    --color-secondary-dark-11:  #aac8de;
    --color-secondary-dark-12:  #bad7ec;
    --color-secondary-dark-13:  #cae6fa;
    --color-secondary-light-1:  #1d2840;
    --color-secondary-light-2:  #161e2d;
    --color-secondary-light-3:  #101622;
    --color-secondary-light-4:  #0a0f18;
    --color-secondary-alpha-10: #1d284019;
    --color-secondary-alpha-20: #1d284033;
    --color-secondary-alpha-30: #1d28404d;
    --color-secondary-alpha-40: #1d284066;
    --color-secondary-alpha-50: #1d284080;
    --color-secondary-alpha-60: #1d284099;
    --color-secondary-alpha-70: #1d2840b3;
    --color-secondary-alpha-80: #1d2840cc;
    --color-secondary-alpha-90: #1d2840e6;
    --color-secondary-hover:    #1d2840;
    --color-secondary-active:   #161e2d;

    /* Backgrounds */
    --color-body:               #0f1420;
    --color-box-header:         #1d2840;
    --color-box-body:           #161e2d;
    --color-box-body-highlight: #242d3a;

    /* Text */
    --color-text-dark:         #e4eaf5;
    --color-text:              #e4eaf5;
    --color-text-light:        #94a3b8;
    --color-text-light-1:      #8898ac;
    --color-text-light-2:      #7d8fa0;
    --color-text-light-3:      #64748b;
    --color-text-focus:        #ffffff;
    --color-placeholder-text:  #64748b;
    --color-caret:             #e4eaf5;

    /* Inputs */
    --color-input-text:              #e4eaf5;
    --color-input-background:        #1d2840;
    --color-input-toggle-background: #1d2840;
    --color-input-border:            rgba(255,255,255,0.15);
    --color-input-border-hover:      rgba(255,255,255,0.25);

    /* Navigation / header */
    --color-header-wrapper:             #161e2d;
    --color-header-wrapper-transparent: #161e2d00;
    --color-nav-bg:                     #0f1420;
    --color-nav-hover-bg:               #242d3a;
    --color-secondary-nav-bg:           #0f1420;

    /* Surfaces */
    --color-hover:        #1d2840;
    --color-active:       #242d3a;
    --color-menu:         #1d2840;
    --color-card:         #161e2d;
    --fancy-card-bg:      #1d2840;
    --fancy-card-border:  #242d3a;
    --color-secondary-bg: #1d2840;
    --color-footer:       #0a0f18;
    --color-timeline:     #242d3a;

    /* Borders / shadows */
    --color-light-border:        rgba(255,255,255,0.10);
    --color-shadow:              rgba(0,0,0,0.40);
    --color-light:               rgba(0,0,0,0.16);
    --color-light-mimic-enabled: rgba(0,0,0,0.16);

    /* Code / markup */
    --color-markup-table-row:      #ffffff06;
    --color-markup-code-block:     #0f1420;
    --color-markup-code-inline:    #0a0f18;
    --color-code-bg:               #161e2d;
    --color-button:                #242d3a;
    --color-expand-button:         #2e3849;
    --color-editor-line-highlight: #1d2840;

    /* Labels / reactions */
    --color-label-text:         #e4eaf5;
    --color-label-bg:           #2e38497b;
    --color-label-hover-bg:     #2e3849a0;
    --color-label-active-bg:    #2e3849ff;
    --color-label-bg-alt:       #2e3849ff;
    --color-reaction-bg:        rgba(255,255,255,0.07);
    --color-reaction-active-bg: #7096d433;
    --color-reaction-hover-bg:  #7096d44d;

    /* Accent / highlight */
    --color-accent:       #8aaee8;
    --color-small-accent: #162a54;
    --color-highlight-fg: #8aaee8;
    --color-highlight-bg: #7096d433;

    /* Tooltips / overlays / selection */
    --color-tooltip-text:     #ffffff;
    --color-tooltip-bg:       rgba(0,0,0,0.95);
    --color-overlay-backdrop: rgba(8,8,8,0.75);
    --color-selection-bg:     #94a3b8;
    --color-selection-fg:     #000000;
    --color-pure-black:       #000000;

    /* Project boards */
    --color-project-board-bg:         #161e2d;
    --color-project-board-dark-label: #64748b;

    /* Semantic colors (dark) */
    --color-red:    #b91c1c;
    --color-orange: #ea580c;
    --color-yellow: #ca8a04;
    --color-olive:  #91a313;
    --color-green:  #15803d;
    --color-teal:   #0d9488;
    --color-blue:   #2563eb;
    --color-violet: #7c3aed;
    --color-purple: #9333ea;
    --color-pink:   #db2777;
    --color-brown:  #a47252;
    --color-grey:   #515f70;
    --color-black:  #111827;
    --color-white:  #ffffff;
    --color-gold:   #b1983b;

    /* Diff (dark) */
    --color-diff-removed-word-bg:    #783030;
    --color-diff-added-word-bg:      #255c39;
    --color-diff-removed-row-bg:     #432121;
    --color-diff-moved-row-bg:       #825718;
    --color-diff-added-row-bg:       #1b3625;
    --color-diff-removed-row-border: #783030;
    --color-diff-moved-row-border:   #a67a1d;
    --color-diff-added-row-border:   #255c39;
    --color-diff-inactive:           #1d2840;

    /* Alerts (dark) */
    --color-error-border:    #783030;
    --color-error-bg:        #5f2525;
    --color-error-bg-active: #783030;
    --color-error-bg-hover:  #783030;
    --color-error-text:      #fef2f2;
    --color-success-border:  #1f6e3c;
    --color-success-bg:      #1d462c;
    --color-success-text:    #aef0c2;
    --color-warning-border:  #a67a1d;
    --color-warning-bg:      #644821;
    --color-warning-text:    #fff388;
    --color-info-border:     #2e50b0;
    --color-info-bg:         #2a396b;
    --color-info-text:       #c0cfe0;

    /* Thin / oklch helpers (dark) */
    --thin-lightness:           0.68;
    --regular-chroma:           0.19;
    --color-thin-green:         oklch(0.68 0.19 145deg);
    --color-thin-red:           oklch(0.68 0.19 27deg);
    --color-thin-purple:        oklch(0.68 0.19 298deg);
    --color-thin-orange:        oklch(0.68 0.19 41deg);
    --thin-lightness-highlight: 0.75;
    --color-thin-red-highlight: oklch(0.75 0.19 27deg);
    --bg-lightness:             0.26;
    --bg-chroma:                0.05;
    --color-danger-bg:          oklch(0.26 0.05 27deg);

    /* Indicators (dark) */
    --color-indicator-offline:    #a1a1aa;
    --color-indicator-offline-20: #a1a1aa1a;
    --color-indicator-idle:       #16a34a;
    --color-indicator-idle-20:    #16a34a1a;
    --color-indicator-active:     #2185d0;
    --color-indicator-active-20:  #2185d033;

    /* Checkerboard (dark) */
    --checkerboard-color-1: #474747;
    --checkerboard-color-2: #313131;

    accent-color: #7096d4;
    color-scheme: dark;
  }
}