/* VivoKey Supra Theme — CSS Custom Properties + Component Overrides */
/* Distributed as a Dangerous-Pi theme plugin                        */
/* Source: @dangerousthings/tokens + @dangerousthings/web            */

/* ============================================================================
   Dark Mode (Default)
   ============================================================================ */
:root[data-brand="supra"] {
  /* Backgrounds */
  --color-bg: #000000;
  --color-bg-rgb: 0, 0, 0;
  --color-surface: #28292E;
  --color-surface-rgb: 40, 41, 46;
  --color-surface-hover: #303136;
  --color-border: #42667E;

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #e2e8f0;
  --color-text-muted: #94a3b8;

  /* Brand Palette */
  --color-primary: #42667E;
  --color-primary-rgb: 66, 102, 126;
  --color-primary-dim: #385872;
  --color-secondary: #8BAEC7;
  --color-secondary-rgb: 139, 174, 199;
  --color-accent: #8BAEC7;
  --color-accent-rgb: 139, 174, 199;
  --color-other: #F67448;
  --color-other-rgb: 246, 116, 72;

  /* Status */
  --color-success: #8BB174;
  --color-success-rgb: 139, 177, 116;
  --color-warning: #F67448;
  --color-warning-rgb: 246, 116, 72;
  --color-error: #ED4337;
  --color-error-rgb: 237, 67, 55;
  --color-info: #42667E;
  --color-info-rgb: 66, 102, 126;

  /* Typography */
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);

  /* Shape */
  --bevel-sm: 0px;
  --bevel-md: 0px;
  --bevel-lg: 0px;
  --radius-sm: 0.5rem;
  --radius: 0.625rem;
  --radius-lg: 0.75rem;

  color-scheme: dark;
}

/* ============================================================================
   Light Mode
   ============================================================================ */
:root[data-brand="supra"][data-theme="light"] {
  /* Backgrounds */
  --color-bg: #ffffff;
  --color-bg-rgb: 255, 255, 255;
  --color-surface: #f0f2f4;
  --color-surface-rgb: 240, 242, 244;
  --color-surface-hover: #e5e8eb;
  --color-border: #000000;

  /* Text */
  --color-text-primary: #000000;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;

  /* Brand Palette */
  --color-primary: #42667E;
  --color-primary-rgb: 66, 102, 126;
  --color-primary-dim: #385872;
  --color-secondary: #F67448;
  --color-secondary-rgb: 246, 116, 72;
  --color-accent: #b45309;
  --color-accent-rgb: 180, 83, 9;
  --color-other: #F67448;
  --color-other-rgb: 246, 116, 72;

  /* Status */
  --color-success: #4d7c0f;
  --color-success-rgb: 77, 124, 15;
  --color-warning: #F67448;
  --color-warning-rgb: 246, 116, 72;
  --color-error: #ED4337;
  --color-error-rgb: 237, 67, 55;
  --color-info: #42667E;
  --color-info-rgb: 66, 102, 126;

  color-scheme: light;
}

/* ============================================================================
   Auto Mode (follows system preference)
   ============================================================================ */
@media (prefers-color-scheme: light) {
  :root[data-brand="supra"][data-theme="auto"] {
    /* Backgrounds */
    --color-bg: #ffffff;
    --color-bg-rgb: 255, 255, 255;
    --color-surface: #f0f2f4;
    --color-surface-rgb: 240, 242, 244;
    --color-surface-hover: #e5e8eb;
    --color-border: #000000;

    /* Text */
    --color-text-primary: #000000;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;

    /* Brand Palette */
    --color-primary: #42667E;
    --color-primary-rgb: 66, 102, 126;
    --color-primary-dim: #385872;
    --color-secondary: #F67448;
    --color-secondary-rgb: 246, 116, 72;
    --color-accent: #b45309;
    --color-accent-rgb: 180, 83, 9;
    --color-other: #F67448;
    --color-other-rgb: 246, 116, 72;

    /* Status */
    --color-success: #4d7c0f;
    --color-success-rgb: 77, 124, 15;
    --color-warning: #F67448;
    --color-warning-rgb: 246, 116, 72;
    --color-error: #ED4337;
    --color-error-rgb: 237, 67, 55;
    --color-info: #42667E;
    --color-info-rgb: 66, 102, 126;

    color-scheme: light;
  }
}

/* ============================================================================
   Supra Component Overrides — MD3 Elevation & Rounded Corners
   ============================================================================ */

/* Card Elevation */
[data-brand="supra"] .card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-lg);
}

[data-brand="supra"] .card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
}

/* Button — Dual-layer inset shadow (hardware button feel) */
[data-brand="supra"] .btn-primary {
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.18),
    inset 2px 2px 4px rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
}

[data-brand="supra"] .btn-primary:hover {
  box-shadow:
    inset -2px -2px 6px rgba(0, 0, 0, 0.22),
    inset 2px 2px 6px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

[data-brand="supra"] .btn-secondary {
  border-radius: var(--radius);
}

[data-brand="supra"] .btn-danger {
  border-radius: var(--radius);
}

/* Badge — Rounded pill (MD3 chip style) */
[data-brand="supra"] .badge {
  border-radius: 8px;
}

/* Badge text — readable on translucent backgrounds */
[data-brand="supra"] .badge-success,
[data-brand="supra"] .badge-error,
[data-brand="supra"] .badge-warning,
[data-brand="supra"] .badge-info {
  color: var(--color-text-primary);
}

/* Input — Rounded with standard focus ring */
[data-brand="supra"] .input,
[data-brand="supra"] input,
[data-brand="supra"] textarea,
[data-brand="supra"] select {
  border-radius: var(--radius);
}

[data-brand="supra"] .input:focus,
[data-brand="supra"] input:focus,
[data-brand="supra"] textarea:focus,
[data-brand="supra"] select:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

/* Terminal — Rounded with subtle elevation */
[data-brand="supra"] .terminal {
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Elevation Utility Classes */
.supra-elevation-1 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.supra-elevation-2 {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.supra-elevation-3 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
}

.supra-elevation-4 {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.supra-elevation-5 {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}