/* ============================================================
   getquin Design Language — drop-in tokens + base styles
   Measured from getquin.com (/portfolio-tracker/, /pricing/, /security/),
   September 2026.

   Usage: <body class="gq">   — dark only; the site ships no light theme.

   Unica77LL is licensed from Lineto. Inter is the closest free substitute:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  --gq-font: "Unica77LL", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gq-font-mono: "Unica77MonoLL", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* two weights, nothing between */
  --gq-w-regular: 400;
  --gq-w-bold: 700;

  /* ---- Type scale. Two parallel ladders share these sizes; the weight
         decides whether a step is a headline or body. Tracking is zero
         at every size, including the 48px marketing hero. ---- */
  --gq-size-marketing: 48px;   /* marketing only — not in the token ladder */
  --gq-size-hero: 2rem;        /* 32px */
  --gq-size-large: 1.375rem;   /* 22px */
  --gq-size-medium: 0.9375rem; /* 15px */
  --gq-size-small: 0.8125rem;  /* 13px */
  --gq-size-tiny: 0.625rem;    /* 10px */
  --gq-size-micro: 0.5rem;     /* 8px  */
  --gq-size-link: 1rem;        /* 16px */

  --gq-lh-tiny: 1;
  --gq-lh-small: 1.25;
  --gq-lh-medium: 1.35;
  --gq-lh-large: 1.5;
  --gq-lh-marketing: 1.1;

  /* ---- One radius for interface, one for media ---- */
  --gq-radius: 4px;
  --gq-radius-media: 6px;
  --gq-radius-circle: 50%;

  /* ---- One unit. Everything is a multiple of it. ---- */
  --gq-unit: 4px;
  --gq-space-xs: 4px;
  --gq-space-sm: 8px;
  --gq-space-md: 12px;
  --gq-space-base: 16px;
  --gq-space-lg: 24px;
  --gq-space-xl: 32px;
  --gq-space-xxl: 48px;
  --gq-space-section: 64px;

  /* ---- Layout ---- */
  --gq-header-height: 48px;
  --gq-container: 1280px;
  --gq-full-height: 100dvh;

  /* ---- Motion: one curve, one duration, on background-color ---- */
  --gq-ease: cubic-bezier(.645, .045, .355, 1);
  --gq-duration: .2s;

  /* ---- The single shadow in the system. Decorative, used once. ---- */
  --gq-glow: 0 7px 70px rgba(0, 0, 0, .25);
}

/* ============================================================
   Colours — dark only
   ============================================================ */
.gq {
  --gq-bg: #000000;              /* committed pure black */
  --gq-bg-raised: #212122;       /* every container */
  --gq-bg-band: #080808;         /* a section one step off the canvas */
  --gq-outline: #2b2b2c;         /* border, divider and hover fill in one value */
  --gq-overlay: rgba(0, 0, 0, .8);

  --gq-text: #ffffff;
  --gq-text-secondary: #999999;  /* default body copy */
  --gq-text-disabled: #373737;
  --gq-text-contrast: #000000;
  --gq-icon: #ffffff;
  --gq-icon-secondary: #999999;
  --gq-icon-bg: #373737;

  --gq-gray-900: #151515;
  --gq-gray-600: #373737;
  --gq-gray-500: #424141;
  --gq-gray-400: #787777;
  --gq-gray-300: #999999;
  /* the light pair exists in the ramp but is never used on a dark surface */
  --gq-gray-100: #f2f2f2;
  --gq-gray-50: #f9f9f9;

  --gq-button-primary: #ffffff;
  --gq-button-primary-label: #000000;
  --gq-button-primary-disabled: #373737;
  --gq-button-border: #373737;
  --gq-button-action: #253bbd;
  --gq-button-action-disabled: rgba(37, 59, 189, .3);
  --gq-button-warning: #f13824;
  --gq-button-warning-disabled: rgba(241, 56, 36, .3);
  --gq-button-secondary: #999999;
  --gq-button-secondary-disabled: #787777;
  --gq-button-inverted-border: #cccccc;
  --gq-link: #6a80ff;

  /* tags: saturated text on a desaturated ground of the same hue */
  --gq-tag-green: #59e184;   --gq-tag-green-bg: #2c4234;
  --gq-tag-red: #f13824;     --gq-tag-red-bg: #30110d;
  --gq-tag-yellow: #efa043;  --gq-tag-yellow-bg: #30200d;
  --gq-tag-blue: #6a80ff;    --gq-tag-blue-bg: #0f184c;
  --gq-tag-violet: #7e51fd;  --gq-tag-violet-bg: #332a4e;
  --gq-tag-gray: #999999;    --gq-tag-gray-bg: #2b2b2c;

  /* named accents — charts and illustration, never chrome */
  --gq-malachite: #59e184;
  --gq-aquamarine: #4de4a6;
  --gq-turquoise: #33e0c1;
  --gq-sky: #57deea;
  --gq-violet: #7e51fd;
  --gq-orchid: #b26eb3;
  --gq-jaffa: #efa043;
  --gq-golden: #ffe600;
  --gq-venetian: #ef5343;
  --gq-klein-blue: #001fa3;
  --gq-royal-indigo: #3f4b9d;
  --gq-rurikon: #172642;
  --gq-chinese-black: #0a1225;

  color-scheme: dark;
  margin: 0;
  font-family: var(--gq-font);
  font-size: var(--gq-size-link);
  line-height: var(--gq-lh-large);
  font-weight: var(--gq-w-regular);
  letter-spacing: 0;
  color: var(--gq-text);
  background: var(--gq-bg);
  -webkit-font-smoothing: antialiased;
}

.gq h1, .gq h2, .gq h3, .gq h4, .gq p, .gq ul { margin: 0; }
.gq a { color: var(--gq-text); text-decoration: none; }
.gq a:focus-visible, .gq button:focus-visible { outline: 2px solid var(--gq-link); outline-offset: 2px; }

/* ---- Headline ladder: weight 700 ---- */
.gq .marketing-hero, .gq .headline-hero, .gq .headline-large,
.gq .headline-medium, .gq .headline-small, .gq .headline-tiny {
  font-weight: var(--gq-w-bold); color: var(--gq-text); letter-spacing: 0;
}
.gq .marketing-hero  { font-size: var(--gq-size-marketing); line-height: var(--gq-lh-marketing); text-wrap: balance; }
.gq .headline-hero   { font-size: var(--gq-size-hero);   line-height: var(--gq-lh-small); }
.gq .headline-large  { font-size: var(--gq-size-large);  line-height: var(--gq-lh-medium); }
.gq .headline-medium { font-size: var(--gq-size-medium); line-height: var(--gq-lh-medium); }
.gq .headline-small  { font-size: var(--gq-size-small);  line-height: var(--gq-lh-small); }
.gq .headline-tiny   { font-size: var(--gq-size-tiny);   line-height: var(--gq-lh-small); }

/* ---- Body ladder: weight 400, and grey by default ---- */
.gq .body-large { font-size: var(--gq-size-medium); line-height: var(--gq-lh-large);  color: var(--gq-text-secondary); }
.gq .body       { font-size: var(--gq-size-small);  line-height: var(--gq-lh-small);  color: var(--gq-text-secondary); }
.gq .body-small { font-size: var(--gq-size-tiny);   line-height: var(--gq-lh-small);  color: var(--gq-text-secondary); }
.gq .body-tiny  { font-size: var(--gq-size-micro);  line-height: var(--gq-lh-tiny);   color: var(--gq-text-secondary); }
.gq .mono       { font-family: var(--gq-font-mono); font-size: var(--gq-size-small); line-height: var(--gq-lh-small); }

/* ---- Buttons: one geometry, only the fill changes ---- */
.gq .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gq-space-sm);
  height: 40px; padding: 0 var(--gq-space-base);
  font: inherit; font-size: var(--gq-size-small); font-weight: var(--gq-w-bold);
  line-height: var(--gq-lh-tiny); letter-spacing: 0;
  border: 1px solid transparent; border-radius: var(--gq-radius);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--gq-button-primary); color: var(--gq-button-primary-label);
  transition: background-color var(--gq-duration) var(--gq-ease),
              border-color var(--gq-duration) var(--gq-ease);
}
.gq .btn:active { background: var(--gq-gray-100); }
.gq .btn[disabled] { background: var(--gq-button-primary-disabled); color: var(--gq-text-secondary); cursor: default; }
.gq .btn--outlined {
  background: transparent; color: var(--gq-text); border-color: var(--gq-button-border);
}
.gq .btn--outlined:active { background: var(--gq-outline); }
.gq .btn--raised {
  background: var(--gq-bg-raised); color: var(--gq-text); border-color: var(--gq-button-border);
}
.gq .btn--action  { background: var(--gq-button-action);  color: var(--gq-text); border-color: var(--gq-button-action); }
.gq .btn--warning { background: var(--gq-button-warning); color: var(--gq-text); border-color: var(--gq-button-warning); }

/* ---- The one container ---- */
.gq .widget {
  background: var(--gq-bg-raised);
  border: 1px solid var(--gq-outline);
  border-radius: var(--gq-radius);
  padding: var(--gq-space-base);
}

/* ---- Tags ---- */
.gq .tag {
  display: inline-flex; align-items: center;
  font-size: var(--gq-size-tiny); font-weight: var(--gq-w-bold); line-height: var(--gq-lh-small);
  padding: 2px var(--gq-space-sm); border-radius: var(--gq-radius);
  background: var(--gq-tag-gray-bg); color: var(--gq-tag-gray);
}
.gq .tag--green  { background: var(--gq-tag-green-bg);  color: var(--gq-tag-green); }
.gq .tag--red    { background: var(--gq-tag-red-bg);    color: var(--gq-tag-red); }
.gq .tag--yellow { background: var(--gq-tag-yellow-bg); color: var(--gq-tag-yellow); }
.gq .tag--blue   { background: var(--gq-tag-blue-bg);   color: var(--gq-tag-blue); }
.gq .tag--violet { background: var(--gq-tag-violet-bg); color: var(--gq-tag-violet); }

/* ---- Structure ---- */
.gq .container { max-width: var(--gq-container); margin-inline: auto; padding-inline: var(--gq-space-lg); }
.gq .header {
  height: var(--gq-header-height);
  display: flex; align-items: center; gap: var(--gq-space-lg);
  background: var(--gq-bg);
}
.gq .divider { border: 0; border-top: 1px solid var(--gq-outline); margin: 0; }
.gq .section { padding-block: var(--gq-space-section); }
.gq .band { background: var(--gq-bg-band); }
.gq .text-link { color: var(--gq-link); }
.gq img, .gq .media { border-radius: var(--gq-radius-media); display: block; max-width: 100%; }
.gq .footer { background: var(--gq-outline); padding-block: var(--gq-space-xl); }