@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

/* Quilt base theme — v1 token contract (4.9 / ADR-0036), brand: quiltsoftware.com. Surfaces are
   gently cool-tinted (not flat white/grey) so three planes read distinctly: tinted page → blue-grey
   sidebar → white cards; dark mode carries real navy depth rather than neutral grey. */
:root {
  color-scheme: light;

  --q-color-bg:            #f5f7fc;  /* page — cool off-white */
  --q-color-surface:       #e9edf7;  /* sidebar / muted — soft blue-grey */
  --q-color-elevated:      #ffffff;  /* cards — pop white above the tinted page */
  --q-color-fg:            #14172a;  /* navy-ink body text */
  --q-color-muted-fg:      #5a6178;
  --q-color-heading:       #171f4c;
  --q-color-on-primary:    #ffffff;
  --q-color-on-accent:     #ffffff;
  --q-color-primary:       #171f4c;  /* brand navy */
  --q-color-primary-hover: #232c63;
  --q-color-accent:        #0c63ff;  /* brand link blue */
  --q-color-accent-hover:  #0da6ff;
  --q-color-secondary:     #8f568f;  /* brand mauve */
  --q-color-success:       #1f9d57;
  --q-color-warning:       #f0a818;
  --q-color-danger:        #dc3545;
  --q-color-info:          #17a2b8;
  --q-color-border:        #e1e6f1;
  --q-color-ring:          #0c63ff;

  --q-radius-sm: 6px;
  --q-radius:    10px;
  --q-radius-lg: 16px;

  --q-space-1: 0.25rem;
  --q-space-2: 0.5rem;
  --q-space-3: 0.75rem;
  --q-space-4: 1rem;
  --q-space-5: 1.5rem;
  --q-space-6: 2rem;

  --q-font-sans:          "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --q-font-display:       "Poppins", "Figtree", system-ui, sans-serif;
  --q-font-size:          14px;
  --q-font-weight-medium: 550;

  --q-shadow-sm: 0 1px 2px rgba(23, 31, 76, 0.06), 0 1px 3px rgba(23, 31, 76, 0.10);
  --q-shadow:    0 8px 24px rgba(23, 31, 76, 0.12);
}

/* Dark — explicit host selection (mode: "dark"). Navy doesn't read on a dark field, so the brand
   shifts to its periwinkle/bright-blue variants; surfaces keep a navy cast (not neutral grey). */
:root[data-color-scheme="dark"] {
  color-scheme: dark;

  --q-color-bg:            #0a0d1a;
  --q-color-surface:       #131a32;
  --q-color-elevated:      #171f3b;
  --q-color-fg:            #eceff8;
  --q-color-muted-fg:      #99a2be;
  --q-color-heading:       #ffffff;
  --q-color-primary:       #5b73e6;
  --q-color-primary-hover: #7488ec;
  --q-color-accent:        #2f9bff;
  --q-color-accent-hover:  #57b0ff;
  --q-color-secondary:     #c08bc0;
  --q-color-border:        #283151;
  --q-color-ring:          #2f9bff;

  --q-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --q-shadow:    0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Dark — system fallback (mode: "system" leaves no attribute, so defer to the OS; an explicit
   attribute above always wins, being guarded to :not([data-color-scheme])). */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) {
    color-scheme: dark;

    --q-color-bg:            #0a0d1a;
    --q-color-surface:       #131a32;
    --q-color-elevated:      #171f3b;
    --q-color-fg:            #eceff8;
    --q-color-muted-fg:      #99a2be;
    --q-color-heading:       #ffffff;
    --q-color-primary:       #5b73e6;
    --q-color-primary-hover: #7488ec;
    --q-color-accent:        #2f9bff;
    --q-color-accent-hover:  #57b0ff;
    --q-color-secondary:     #c08bc0;
    --q-color-border:        #283151;
    --q-color-ring:          #2f9bff;

    --q-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --q-shadow:    0 10px 30px rgba(0, 0, 0, 0.6);
  }
}