*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

:root {
  color-scheme: light;

  /* Light theme — cool, blue-tinted (LouvorDash family) */
  --color-bg:           #f0f2f9;
  --color-bg-tint:      #eceef6;
  --color-surface:      #ffffff;
  --color-surface-2:    #f5f6fb;
  --color-border:       rgba(30, 35, 80, 0.12);
  --color-border-soft:  rgba(30, 35, 80, 0.07);
  --color-text:         #1a1d2e;
  --color-text-muted:   #5a5f7a;
  --color-accent:       #3b6ef5;
  --color-accent-soft:  rgba(59, 110, 245, 0.10);
  --color-accent-line:  rgba(59, 110, 245, 0.30);
  --on-accent:          #ffffff;
  --btn-primary-bg:     #3b6ef5;
  --btn-primary-fg:     #ffffff;
  --btn-primary-hover:  #2f5ee0;
  --color-danger:       #dc2626;
  --color-success:      #16a34a;

  --radius-sm:   9px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-card: 18px;

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --shadow-sm:  0 1px 3px rgba(30, 35, 80, 0.07), 0 1px 2px rgba(30, 35, 80, 0.04);
  --shadow-md:  0 4px 16px rgba(30, 35, 80, 0.09), 0 1px 4px rgba(30, 35, 80, 0.05);
  --shadow-lg:  0 16px 42px rgba(30, 35, 80, 0.18);

  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med:  280ms cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 62px;

  --cifra-font-size: 0.9rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg:           #080912;
    --color-bg-tint:      #11132a;
    --color-surface:      #0f1022;
    --color-surface-2:    #161829;
    --color-border:       rgba(124, 140, 255, 0.14);
    --color-border-soft:  rgba(124, 140, 255, 0.08);
    --color-text:         #e8eaf6;
    --color-text-muted:   #9196b8;
    --color-accent:       #6b8dff;
    --color-accent-soft:  rgba(107, 141, 255, 0.14);
    --color-accent-line:  rgba(107, 141, 255, 0.34);
    --on-accent:          #ffffff;
    --btn-primary-bg:     #3b6ef5;
    --btn-primary-fg:     #ffffff;
    --btn-primary-hover:  #5b82ff;
    --color-danger:       #f0735c;
    --color-success:      #4ade80;

    --shadow-sm:  0 6px 20px rgba(0, 0, 0, 0.36);
    --shadow-md:  0 16px 42px rgba(0, 0, 0, 0.48);
    --shadow-lg:  0 28px 64px rgba(0, 0, 0, 0.62);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:           #080912;
  --color-bg-tint:      #11132a;
  --color-surface:      #0f1022;
  --color-surface-2:    #161829;
  --color-border:       rgba(124, 140, 255, 0.14);
  --color-border-soft:  rgba(124, 140, 255, 0.08);
  --color-text:         #e8eaf6;
  --color-text-muted:   #9196b8;
  --color-accent:       #6b8dff;
  --color-accent-soft:  rgba(107, 141, 255, 0.14);
  --color-accent-line:  rgba(107, 141, 255, 0.34);
  --on-accent:          #ffffff;
  --btn-primary-bg:     #3b6ef5;
  --btn-primary-fg:     #ffffff;
  --btn-primary-hover:  #5b82ff;
  --color-danger:       #f0735c;
  --color-success:      #4ade80;

  --shadow-sm:  0 6px 20px rgba(0, 0, 0, 0.36);
  --shadow-md:  0 16px 42px rgba(0, 0, 0, 0.48);
  --shadow-lg:  0 28px 64px rgba(0, 0, 0, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  tab-size: 2;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(110% 70% at 100% -10%, var(--color-accent-soft) 0%, transparent 50%),
    var(--color-bg);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

/* Staggered entrance on load */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-header { animation: rise var(--transition-med) both; }
.panel--editor  { animation: rise var(--transition-med) 80ms both; }
.panel--preview { animation: rise var(--transition-med) 160ms both; }