/* Donkit DS — Light theme
 * Import AFTER tokens.css. Unlayered → naturally overrides @layer base.
 * Usage: <div data-theme="light"> */

[data-theme="light"] {
  /* === REQUIRED: surface === */
  --color-surface-0: #F8F9FA;
  --color-surface-1: #F2F2F2;
  --color-surface-2: #E8E8E8;
  --color-surface-3: #F8F9FA;

  /* === REQUIRED: foreground === */
  --color-fg-primary:   rgba(14, 15, 17, 0.95);
  --color-fg-secondary: rgba(14, 15, 17, 0.65);
  --color-fg-disabled:  rgba(14, 15, 17, 0.30);

  /* === REQUIRED: interactive overlays (legacy fallback) === */
  --color-state-hover:    rgba(14, 15, 17, 0.05);
  --color-state-active:   rgba(14, 15, 17, 0.10);
  --color-state-selected: rgba(14, 15, 17, 0.08);
  --color-state-focus:    rgba(14, 15, 17, 0.30);

  /* === REQUIRED: borders === */
  --color-border-light:   rgba(14, 15, 17, 0.10);
  --color-border-default: rgba(14, 15, 17, 0.20);
  --color-border-strong:  rgba(14, 15, 17, 0.40);
  --color-border-focus:   rgba(14, 15, 17, 0.50);

  /* === REQUIRED: backdrop === */
  --color-overlay: rgba(14, 15, 17, 0.60);

  /* === OPTIONAL: shadows === */
  --shadow-1: 0 2px 8px  rgba(0, 0, 0, 0.10);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.18);

  /* === OPTIONAL: accent === */
  --color-accent-hover: var(--color-red-dark);

  /* === OPTIONAL: data palette (fg darkened for light bg) === */
  --data-1-fg: #C73B3B;
  --data-2-fg: #C2700F;
  --data-3-fg: #8A6A00;
  --data-4-fg: #0E8A5A;
  --data-5-fg: #2563EB;
  --data-6-fg: #7C3AED;
  --data-7-fg: #BE3F8A;

  /* === OPTIONAL: status === */
  --color-status-info:       var(--color-info-dark);
  --color-status-info-bg:    rgba(96,  165, 250, 0.15);
  --color-status-success:    var(--color-success-dark);
  --color-status-success-bg: rgba(0,   200, 110, 0.15);
  --color-status-warning:    var(--color-warning-dark);
  --color-status-warning-bg: rgba(255, 187, 0,   0.15);
  --color-status-error:      var(--color-error-dark);
  --color-status-error-bg:   rgba(255, 18,  0,   0.15);
}

/* F9: color-mix overlays for modern browsers */
@supports (background: color-mix(in srgb, red, blue)) {
  [data-theme="light"] {
    --color-state-hover:    color-mix(in srgb, currentColor  5%, transparent);
    --color-state-active:   color-mix(in srgb, currentColor 10%, transparent);
    --color-state-selected: color-mix(in srgb, currentColor  8%, transparent);
  }
}

/* Edgy structural variant on light background */
[data-variant="edgy"][data-theme="light"] {
  --color-accent-hover:    var(--color-accent-2);
  --color-accent-hover-fg: var(--color-accent-2-fg);
  --field-border:          var(--color-border-default);
  --field-border-active:   var(--color-border-strong);
  --card-border:           var(--color-border-light);
  --shadow-1: 0 2px 8px  rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(14, 15, 17, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(14, 15, 17, 0.08);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(14, 15, 17, 0.10);
}