/* Allanux house design tokens.
   Templates import this and override only what they must, so the library
   reads as one studio. */
:root {
  /* brand */
  --a-blue: #0181F5;
  --a-navy: #010F34;
  --a-body: #4D5765;
  --a-bg: #F5F8FC;
  --a-white: #FFFFFF;
  --a-line: #E4E9F2;

  /* state */
  --a-success: #0F9D58;
  --a-warning: #F4B400;
  --a-danger: #DB4437;

  /* type */
  --a-font-head: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --a-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --a-h1: clamp(2rem, 5vw, 3.5rem);
  --a-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --a-h3: clamp(1.15rem, 2.5vw, 1.5rem);
  --a-text: 1rem;
  --a-small: 0.875rem;
  --a-lh-tight: 1.15;
  --a-lh: 1.6;

  /* space: 4px base */
  --a-1: 0.25rem; --a-2: 0.5rem;  --a-3: 0.75rem; --a-4: 1rem;
  --a-6: 1.5rem;  --a-8: 2rem;    --a-12: 3rem;   --a-16: 4rem;  --a-24: 6rem;

  /* shape */
  --a-radius: 12px;
  --a-radius-lg: 20px;
  --a-radius-pill: 999px;
  --a-shadow: 0 2px 8px rgba(1,15,52,.06);
  --a-shadow-lg: 0 12px 32px rgba(1,15,52,.10);

  /* layout */
  --a-container: 1180px;
  --a-gutter: 20px;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --a-bg: #0B1220;
    --a-white: #111A2B;
    --a-navy: #EAF0FA;
    --a-body: #A8B3C5;
    --a-line: #1E293B;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--a-font-body); color: var(--a-body);
       background: var(--a-bg); line-height: var(--a-lh); }
h1, h2, h3, h4 { font-family: var(--a-font-head); color: var(--a-navy);
                 line-height: var(--a-lh-tight); margin: 0 0 var(--a-4); }
h1 { font-size: var(--a-h1); } h2 { font-size: var(--a-h2); } h3 { font-size: var(--a-h3); }
a { color: var(--a-blue); }
img { max-width: 100%; height: auto; }
.a-container { max-width: var(--a-container); margin: 0 auto; padding: 0 var(--a-gutter); }
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--a-blue); outline-offset: 2px;
}