@import "tailwindcss";

/* Light mode defaults (fallback when no BrandingConfig exists) */
:root {
  --dpf-bg: #fafafa;
  --dpf-surface-1: #ffffff;
  --dpf-surface-2: #f4f4f6;
  --dpf-surface-3: #eeeef2;
  --dpf-text: #1a1a2e;
  --dpf-text-secondary: #4a4a5e;
  --dpf-accent: #2563eb;
  --dpf-accent-soft: color-mix(in srgb, var(--dpf-accent) 12%, var(--dpf-surface-1));
  --dpf-border: #d4d4dc;
  --dpf-border-strong: #c8c8d4;
  --dpf-muted: #6b7280;
  --dpf-success: #16a34a;
  --dpf-warning: #d97706;
  --dpf-error: #dc2626;
  /* State backgrounds are TINTED versions of the foreground color so chips can
     pair fg + bg without becoming a solid color block (e.g. AttentionChip in
     PortalContextStrip). Use color-mix to derive a subtle background while
     preserving the surface beneath. */
  --dpf-state-warning: color-mix(in srgb, var(--dpf-warning) 13%, var(--dpf-surface-1));
  --dpf-state-error: color-mix(in srgb, var(--dpf-error) 13%, var(--dpf-surface-1));
  --dpf-state-info: color-mix(in srgb, var(--dpf-info) 13%, var(--dpf-surface-1));
  --dpf-state-success: color-mix(in srgb, var(--dpf-success) 13%, var(--dpf-surface-1));
  --dpf-info: #0284c7;
  --dpf-font-body: Inter, system-ui, sans-serif;
  --dpf-font-heading: Inter, system-ui, sans-serif;
}

/* Dark mode defaults */
@media (prefers-color-scheme: dark) {
  :root {
    --dpf-bg: #0f0f1a;
    --dpf-surface-1: #1a1a2e;
    --dpf-surface-2: #161625;
    --dpf-surface-3: #121220;
    --dpf-text: #e2e2f0;
    --dpf-text-secondary: #b8b8cc;
    --dpf-accent: #7c8cf8;
    --dpf-accent-soft: color-mix(in srgb, var(--dpf-accent) 18%, var(--dpf-surface-1));
    --dpf-border: #2a2a40;
    --dpf-border-strong: #3a3a55;
    --dpf-muted: #8888a0;
    --dpf-success: #4ade80;
    --dpf-warning: #fbbf24;
    --dpf-error: #f87171;
    /* See light-mode comment above — tinted backgrounds preserve fg/bg contrast. */
    --dpf-state-warning: color-mix(in srgb, var(--dpf-warning) 18%, var(--dpf-surface-1));
    --dpf-state-error: color-mix(in srgb, var(--dpf-error) 18%, var(--dpf-surface-1));
    --dpf-state-info: color-mix(in srgb, var(--dpf-info) 18%, var(--dpf-surface-1));
    --dpf-state-success: color-mix(in srgb, var(--dpf-success) 18%, var(--dpf-surface-1));
    --dpf-info: #38bdf8;
  }
}

/* Logo visibility toggles */
.logo-light { display: block; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}

body {
  background: var(--dpf-bg);
  color: var(--dpf-text);
  font-family: var(--dpf-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Form element usability standards — WCAG 2.2 AA baseline.
   Sits in Tailwind's components layer: above base, below utilities.
   Intentional overrides via utility classes still work. */
@layer components {
  input, textarea, select {
    color: var(--dpf-text);
    background-color: var(--dpf-surface-1);
    border-color: var(--dpf-border);
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: inherit;
    font-family: inherit;
  }

  input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--dpf-accent);
    outline-offset: 2px;
    border-color: var(--dpf-accent);
  }

  input::placeholder, textarea::placeholder {
    color: var(--dpf-muted);
  }

  input:disabled, textarea:disabled, select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  option {
    background: var(--dpf-surface-1);
    color: var(--dpf-text);
  }

  option:checked {
    background: color-mix(in srgb, var(--dpf-accent) 15%, var(--dpf-surface-1));
  }
}

/* Build Studio v2 — bubble entrance animation */
@keyframes dpf-slide-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dpf-slide-up { animation: dpf-slide-up 320ms ease-out; }
