/* ═══════════════════════════════════════════════════════════════════════════
   ERK color theme — light mode
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    /* ── Brand (protected — do not rename or change values) ───────────────── */
    --color-erk-red:                 #DA291C;
    --color-erk-red-transparent-25:  rgba(218, 41, 28, 0.25);
    --color-erk-red-transparent-10:  rgba(218, 41, 28, 0.1);
    --color-delete:                  #E50000;
    --color-erk-grey:                #A2AAAD;

    /* ── ERK grey scale ───────────────────────────────────────────────────── */
    --color-erk-grey-lighter:        #BDC6C9;
    --color-erk-grey-lightest:       #D5E0E3;

    /* ── Neutral grey scale ───────────────────────────────────────────────── */
    --color-grey:                    #B3B3B3;
    --color-grey-lighter:            #C9C9C9;
    --color-grey-even-lighter:       #E0E0E0;
    --color-grey-lightest:           #F7F7F7;

    /* ── Surfaces & text ──────────────────────────────────────────────────── */
    --color-ui-background:           white;
    --color-surface:                 #f3f3f3;
    --color-text:                    black;
    --color-text-disabled:           var(--color-grey);

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --color-ui-border:               #ccc;

    /* ── Inputs ───────────────────────────────────────────────────────────── */
    --color-input-background:        white;
    --color-input-border:            #ccc;
    --color-input-focus-border:      var(--color-erk-red);
    --color-input-disabled-background: #f2f2f2;
    --color-input-disabled-text:     #888;

    /* ── Buttons — primary (red) ──────────────────────────────────────────── */
    --color-button-primary:          var(--color-erk-red);
    --color-button-primary-hover:    #b5210f;
    --color-button-primary-active:   #8e1a0c;
    --color-button-primary-text:     white;

    /* ── Buttons — secondary (neutral grey) ───────────────────────────────── */
    --color-button-secondary:        #D8D8D8;
    --color-button-secondary-hover:  #c4c4c4;
    --color-button-secondary-active: #b0b0b0;
    --color-button-secondary-text:   black;

    /* ── Buttons — delete (destructive) ──────────────────────────────────── */
    --color-delete-hover:            #b50000;
    --color-delete-active:           #880000;

    /* ── Aliases kept for backward compatibility ──────────────────────────── */
    --color-button-grey:             var(--color-button-secondary);
    --color-button-grey-hover:       var(--color-button-secondary-hover);

    /* ── Tabs & rows ──────────────────────────────────────────────────────── */
    --color-tab-selected:            var(--color-erk-red-transparent-25);
    --color-row_hover:               var(--color-erk-red-transparent-10);
    --color-row_error:               var(--color-erk-red-transparent-10);

    /* ── Validation / feedback ────────────────────────────────────────────── */
    --color-error-background:        #fdeaea;
    --color-error-border:            var(--color-erk-red);
    --color-error-text:              var(--color-erk-red);

    /* ── Semantic misc ────────────────────────────────────────────────────── */
    --color-expired:                 var(--color-delete);
    --color-emphasis:                #0066cc;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERK color theme — dark mode
   Red stays identical; everything else adapts to a dark surface.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* ── Brand (protected — red unchanged) ────────────────────────────────── */
    --color-erk-red:                 #DA291C;
    --color-erk-red-transparent-25:  rgba(218, 41, 28, 0.25);
    --color-erk-red-transparent-10:  rgba(218, 41, 28, 0.1);
    --color-delete:                  #E50000;
    --color-erk-grey:                #A2AAAD;

    /* ── ERK grey scale (shifted darker) ─────────────────────────────────── */
    --color-erk-grey-lighter:        #7a8285;
    --color-erk-grey-lightest:       #5c6366;

    /* ── Neutral grey scale (shifted darker) ─────────────────────────────── */
    --color-grey:                    #666;
    --color-grey-lighter:            #555;
    --color-grey-even-lighter:       #3a3a3a;
    --color-grey-lightest:           #2a2a2a;

    /* ── Surfaces & text ──────────────────────────────────────────────────── */
    --color-ui-background:           #1e1e1e;
    --color-surface:                 #2a2a2a;
    --color-text:                    #e8e8e8;
    --color-text-disabled:           #666;

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --color-ui-border:               #555;

    /* ── Inputs ───────────────────────────────────────────────────────────── */
    --color-input-background:        #333;
    --color-input-border:            #555;
    --color-input-focus-border:      var(--color-erk-red);
    --color-input-disabled-background: #252525;
    --color-input-disabled-text:     #666;

    /* ── Buttons — primary (red unchanged) ───────────────────────────────── */
    --color-button-primary:          var(--color-erk-red);
    --color-button-primary-hover:    #b5210f;
    --color-button-primary-active:   #8e1a0c;
    --color-button-primary-text:     white;

    /* ── Buttons — secondary ──────────────────────────────────────────────── */
    --color-button-secondary:        #3a3a3a;
    --color-button-secondary-hover:  #4a4a4a;
    --color-button-secondary-active: #5a5a5a;
    --color-button-secondary-text:   var(--color-text);

    /* ── Buttons — delete ─────────────────────────────────────────────────── */
    --color-delete-hover:            #b50000;
    --color-delete-active:           #880000;

    /* ── Aliases kept for backward compatibility ──────────────────────────── */
    --color-button-grey:             var(--color-button-secondary);
    --color-button-grey-hover:       var(--color-button-secondary-hover);

    /* ── Tabs & rows ──────────────────────────────────────────────────────── */
    --color-tab-selected:            var(--color-erk-red-transparent-25);
    --color-row_hover:               var(--color-erk-red-transparent-10);
    --color-row_error:               var(--color-erk-red-transparent-10);

    /* ── Validation / feedback ────────────────────────────────────────────── */
    --color-error-background:        rgba(218, 41, 28, 0.15);
    --color-error-border:            var(--color-erk-red);
    --color-error-text:              #ff8a85;

    /* ── Semantic misc ────────────────────────────────────────────────────── */
    --color-expired:                 var(--color-delete);
    --color-emphasis:                #5ba3e8;
  }
}