:root {

  --nv-bg-rgb:            255 251 243;
  --nv-bg-2-rgb:          255 242 224;
  --nv-bg-sunken-rgb:     243 234 216;
  --nv-surface-rgb:       255 255 255;
  --nv-bg-drenched-rgb:    36  26  18;
  --nv-ink-rgb:            31  31  31;
  --nv-ink-2-rgb:          51  51  51;
  --nv-ink-3-rgb:          82  82  82;
  --nv-accent-rgb:        236 101  42;
  --nv-accent-2-rgb:      241 182  45;
  --nv-accent-cool-rgb:    31 111 120;
  --nv-line-rgb:           40  40  40;

  --nv-bg:                rgb(var(--nv-bg-rgb));
  --nv-bg-2:              rgb(var(--nv-bg-2-rgb));
  --nv-bg-sunken:         rgb(var(--nv-bg-sunken-rgb));
  --nv-surface:           rgb(var(--nv-surface-rgb));

  --nv-bg-drenched:       rgb(var(--nv-bg-drenched-rgb));

  --nv-ink:               rgb(var(--nv-ink-rgb));
  --nv-ink-2:             rgb(var(--nv-ink-2-rgb));
  --nv-ink-3:             rgb(var(--nv-ink-3-rgb));

  --nv-accent:            rgb(var(--nv-accent-rgb));
  --nv-accent-2:          rgb(var(--nv-accent-2-rgb));
  --nv-accent-cool:       rgb(var(--nv-accent-cool-rgb));

  --nv-line:              rgb(var(--nv-line-rgb));
  --nv-line-soft:         rgb(var(--nv-line-rgb) / 40%);
  --nv-line-hair:         rgb(var(--nv-line-rgb) / 15%);

  --nv-surface-hover:     rgb(var(--nv-line-rgb) / 5%);

  --nv-accent-fill-hover:  #e06028;
  --nv-accent-fill-active: #d9541f;

  --nv-accent-text:       #b2491d;
  --nv-accent-text-hover: #a0451d;

  --nv-on-accent:         #ffffff;
  --nv-on-accent-2:       var(--nv-ink);
  --nv-on-drenched:       var(--nv-bg);

  --nv-success-rgb:        25 121  75;
  --nv-warning-rgb:       124  74   0;
  --nv-danger-rgb:        179  38  30;

  --nv-success:           rgb(var(--nv-success-rgb));
  --nv-warning:           rgb(var(--nv-warning-rgb));
  --nv-danger:            rgb(var(--nv-danger-rgb));
  --nv-info:              var(--nv-accent-cool);

  --nv-wa:                #25d366;

  --nv-on-success:        #ffffff;
  --nv-on-danger:         #ffffff;
  --nv-on-info:           #ffffff;

  --nv-warning-fill:      var(--nv-accent-2);

  --nv-success-soft:      rgb(var(--nv-success-rgb) / 10%);
  --nv-warning-soft:      rgb(var(--nv-warning-rgb) / 10%);
  --nv-danger-soft:       rgb(var(--nv-danger-rgb) / 10%);
  --nv-info-soft:         rgb(var(--nv-accent-cool-rgb) / 10%);

  --nv-font-sans:   'Karla', 'Inter', ui-sans-serif, system-ui,
                    -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nv-font-serif:  'Vollkorn', 'Fraunces', Georgia, 'Times New Roman', serif;
  --nv-font-mono:   'JetBrains Mono', SFMono-Regular, Menlo, Monaco,
                    Consolas, 'Liberation Mono', monospace;

  --nv-text-xs:           14px;
  --nv-text-sm:           16px;
  --nv-text-base:         18px;
  --nv-text-lg:           20px;
  --nv-text-xl:           24px;
  --nv-text-2xl:          28px;
  --nv-text-3xl:          34px;
  --nv-text-4xl:          42px;
  --nv-text-5xl:          54px;

  --nv-body-size:         var(--nv-text-base);
  --nv-body-weight:       500;
  --nv-body-leading:      1.6;
  --nv-body-tracking:     0.005em;

  --nv-weight-body:       500;
  --nv-weight-heading:    600;
  --nv-weight-bold:       700;

  --nv-weight-input:      400;

  --nv-input-size:        var(--nv-text-base);

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

  --nv-control-h:         44px;
  --nv-control-h-sm:      36px;
  --nv-control-h-lg:      48px;
  --nv-control-h-icon:    40px;

  --nv-radius-pill:       999px;

  --nv-border-signature:  1.5px;

  --nv-focus-ring:        0 0 0 3px rgb(var(--nv-accent-rgb) / 40%);
  --nv-focus-offset:      2px;
  --nv-transition:        150ms ease-out;

  --nv-container-max:     1440px;
  --nv-measure:           68ch;

  --nv-side-bg:           #ffffff;
  --nv-side-w:            264px;

  --nv-z-drawer:          1045;
  --nv-z-drawer-backdrop: 1044;
  --nv-topbar-h:          68px;

  --nv-border-w:          1.5px;
  --nv-radius:            14px;

  --nv-shadow-brutal-sm:  4px 4px 0 var(--nv-line);
  --nv-shadow-brutal:     6px 6px 0 var(--nv-line);
  --nv-shadow-brutal-lg:  10px 10px 0 var(--nv-line);
  --nv-shadow-brutal-hover: 8px 8px 0 var(--nv-line);
}

:root {
  --nv-radius-sm:  calc(var(--nv-radius) - 8px);
  --nv-radius-md:  calc(var(--nv-radius) - 4px);
  --nv-radius-lg:  var(--nv-radius);
}

body[data-brutal="soft"] {
  --nv-border-w:            1px;
  --nv-radius:              18px;
  --nv-shadow-brutal-sm:    0 4px 12px rgb(var(--nv-line-rgb) / 8%);
  --nv-shadow-brutal:       0 10px 30px rgb(var(--nv-line-rgb) / 10%);
  --nv-shadow-brutal-lg:    0 16px 40px rgb(var(--nv-line-rgb) / 12%);
  --nv-shadow-brutal-hover: 0 14px 36px rgb(var(--nv-line-rgb) / 14%);
}

body[data-brutal="medium"] {
  --nv-border-w:            2px;
  --nv-radius:              10px;
  --nv-shadow-brutal-sm:    4px 4px 0 var(--nv-line);
  --nv-shadow-brutal:       6px 6px 0 var(--nv-line);
  --nv-shadow-brutal-lg:    10px 10px 0 var(--nv-line);
  --nv-shadow-brutal-hover: 8px 8px 0 var(--nv-line);
}

body[data-brutal="hard"] {
  --nv-border-w:            3px;
  --nv-radius:              4px;
  --nv-shadow-brutal-sm:    6px 6px 0 var(--nv-line);
  --nv-shadow-brutal:       10px 10px 0 var(--nv-line);
  --nv-shadow-brutal-lg:    14px 14px 0 var(--nv-line);
  --nv-shadow-brutal-hover: 12px 12px 0 var(--nv-line);
}

body[data-brutal] {
  --nv-radius-sm:  calc(var(--nv-radius) - 8px);
  --nv-radius-md:  calc(var(--nv-radius) - 4px);
  --nv-radius-lg:  var(--nv-radius);
}
