:root {
    --brand-name: "Brandkop Motors";

    --ink:        #1d1d1f;
  --paper:      #ffffff;
  --sand:       #f5f5f7;
  --accent:     #0071e3;

  --ink-2:      color-mix(in srgb, var(--ink) 88%, white);
  --ink-3:      color-mix(in srgb, var(--ink) 62%, white);
  --text:       var(--ink);
    --text-muted: color-mix(in srgb, var(--ink) 64%, white);
  --text-faint: color-mix(in srgb, var(--ink) 64%, white);
  --on-ink:     white;
  --on-ink-muted: color-mix(in srgb, white 70%, var(--ink));

  --accent-press: color-mix(in srgb, var(--accent) 86%, var(--ink));
    --accent-text:  color-mix(in srgb, var(--accent) 88%, var(--ink));
  --accent-tint:  color-mix(in srgb, var(--accent) 10%, var(--paper));
  --accent-line:  color-mix(in srgb, var(--accent) 36%, var(--paper));

  --line:       color-mix(in srgb, var(--ink) 16%, white);
  --line-soft:  color-mix(in srgb, var(--ink) 8%, white);
  --surface:    var(--paper);
  --surface-2:  color-mix(in srgb, var(--ink) 5%, var(--sand));
  --fill:       color-mix(in srgb, var(--ink) 6%, var(--paper));   
    --ok:     #17703c;
  --ok-tint:   color-mix(in srgb, var(--ok) 12%, var(--paper));
  --pending:   #8a5600;
  --pending-tint: color-mix(in srgb, var(--pending) 13%, var(--paper));
  --stop:   #b22f24;
  --stop-tint: color-mix(in srgb, var(--stop) 10%, var(--paper));

    --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --display: var(--font);

    --t-xs:  0.875rem;       --t-sm:  1rem;           --t-base: 1rem;          --t-md:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lg:  clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  --t-xl:  clamp(1.625rem, 1.45rem + 0.7vw, 2rem);
  --t-2xl: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);

    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

      --r-sm: 12px; --r-md: 18px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;

    --shadow-1: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent),
              0 2px 10px color-mix(in srgb, var(--ink) 4%, transparent);
  --shadow-2: 0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent),
              0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-3: 0 20px 60px color-mix(in srgb, var(--ink) 14%, transparent);

    --dur-1: 120ms; --dur-2: 240ms; --dur-3: 380ms;
  --ease: cubic-bezier(.25, .1, .25, 1);

    --app-max: 460px;            --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tap: 44px;               }