/* Qaba — Untitled theme. Tokens and shared components for every page.
   Values come from gui/themes/untitled.md; component treatments from gui/themes/untitled-components.md.
   Light is the default mode. Dark tokens apply under [data-theme="dark"] and inside .on-dark bands. */

/* ---------- fonts (Boing for headlines, Suisse Intl for everything else) ---------- */
@font-face{font-family:'Boing';src:url('typography/Boing-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Suisse Intl';src:url('typography/SuisseIntl-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Suisse Intl';src:url('typography/SuisseIntl-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Suisse Intl';src:url('typography/SuisseIntl-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens: mode-independent ---------- */
:root{
  --theme-name:Untitled;
  --motion-duration:150ms;
  --motion-easing:cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-large-duration:300ms;
  --motion-large-easing:cubic-bezier(0.16, 1, 0.3, 1);
  --motion-popup-scale:0.96;
  --motion-press-distance:1px;
  --icon-stroke-width:2;

  --space-zero:0px; --space-xxs:5px; --space-xs:9px; --space-s:14px; --space-m:19px; --space-l:28px; --space-xl:37px; --space-xxl:56px;

  --tracking-xs:-0.02em; --tracking-s:-0.01em; --tracking-m:0em; --tracking-l:0.01em; --tracking-xl:0.02em;
  --size-xxs:11px; --line-xxs:15px; --letter-spacing-xxs:0.02em;
  --size-xs:13px;  --line-xs:17px;  --letter-spacing-xs:0.01em;
  --size-s:15px;   --line-s:21px;   --letter-spacing-s:0.01em;
  --size-m:17px;   --line-m:25px;   --letter-spacing-m:0em;
  --size-l:25px;   --line-l:34px;   --letter-spacing-l:-0.01em;
  --size-xl:38px;  --line-xl:42px;  --letter-spacing-xl:-0.01em;
  --size-xxl:51px; --line-xxl:55px; --letter-spacing-xxl:-0.02em;

  --radius-zero:0px; --radius-xs:5px; --radius-s:10px; --radius-m:14px; --radius-l:28px; --radius-xl:43px; --radius-full:9999px;
  --border-none:0px; --border-s:1px; --border-m:1px; --border-l:2px;
  --border-default-color:rgb(0 0 0 / 0.1);
  --border-shadow-none:0 0 0 0 transparent;
  --border-shadow-s:0 0 0 1px rgb(0 0 0 / 0.1);
  --border-shadow-m:0 0 0 1px rgb(0 0 0 / 0.1);
  --border-shadow-l:0 0 0 2px rgb(0 0 0 / 0.1);

  /* GT Standard M is the theme's paid selection; Suisse Intl replaces it for interface, editorial and data, Boing carries headlines */
  --font-ui:"Suisse Intl", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand:"Boing", "Suisse Intl", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial:"Suisse Intl", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data:"Suisse Intl", -apple-system, BlinkMacSystemFont, sans-serif;
  --weight-ui-regular:400; --weight-ui-medium:500; --weight-ui-heavy:700;
  --weight-brand-regular:400; --weight-brand-medium:400; --weight-brand-heavy:400; /* Boing ships one weight */
  --weight-editorial-regular:400; --weight-editorial-medium:500; --weight-editorial-heavy:700;
  --weight-data-regular:400; --weight-data-medium:500; --weight-data-heavy:700;

  --color-none:transparent;
  --color-1:#00d5d4; --color-1-transparent:#00d5d433;
  --color-2:#76ef6b; --color-2-transparent:#76ef6b33;
  --color-3:#009ff0; --color-3-transparent:#009ff033;
  --color-4:#e864ff; --color-4-transparent:#e864ff33;
  --success:#76ef6b; --success-transparent:#76ef6b33;
  --warning:#ffa344; --warning-transparent:#ffa34433;
  --error:#ff5263;   --error-transparent:#ff526333;

  --shadow-none:none;
  --shadow-s:0px 1px 2px 0px #00000000;
  --shadow-m:0px 8px 24px 0px #00000000;
  --shadow-l:0px 12px 30px 0px #00000000;
  --surface-raised-shadow:0 0 0 0 transparent;
  --surface-recessed-shadow:0 0 0 0 transparent;
}

/* ---------- tokens: light ---------- */
:root,[data-theme="light"]{
  --focus-ring-outline:2px solid color-mix(in srgb, #000000 50%, transparent);
  --neutral-1:#ffffff;  --neutral-1-transparent:#ffffff33;
  --neutral-2:#fbfaf9;  --neutral-2-transparent:#fbfaf933;
  --neutral-3:#f2f0ec;  --neutral-3-transparent:#f2f0ec33;
  --neutral-4:#e2ded5;  --neutral-4-transparent:#e2ded533;
  --neutral-5:#cbc5b8;  --neutral-5-transparent:#cbc5b833;
  --neutral-6:#9b968a;  --neutral-6-transparent:#9b968a33;
  --neutral-7:#716c61;  --neutral-7-transparent:#716c6133;
  --neutral-8:#4a453a;  --neutral-8-transparent:#4a453a33;
  --neutral-9:#29251b;  --neutral-9-transparent:#29251b33;
  --neutral-10:#000000; --neutral-10-transparent:#00000033;
  --option-badge-background:color-mix(in srgb, var(--color-1) 10%, transparent);
  --option-badge-foreground:#00d5d4;
  --navigation-active-foreground:#000000;
  --navigation-active-background:#00d5d433;
  --emphasis-chart-fill:#00d5d433;
  --emphasis-icon-background:#f2f0ec; --emphasis-icon-foreground:#000000;
  --emphasis-type-background:#f2f0ec; --emphasis-type-foreground:#000000;
  --cte-canvas:#ffffff; --cte-surface:#fbfaf9; --cte-surface-muted:#f2f0ec;
  --cte-text:#000000; --cte-text-muted:#716c61; --cte-border:rgb(0 0 0 / 0.1);
  --cte-accent:#00d5d4; --cte-accent-text:#000000; --cte-danger:#ff5263; --cte-focus:#00d5d4;
}

/* ---------- tokens: dark ---------- */
[data-theme="dark"],.on-dark{
  --focus-ring-outline:2px solid color-mix(in srgb, #ffffff 50%, transparent);
  --neutral-1:#000000;  --neutral-1-transparent:#00000033;
  --neutral-2:#21201d;  --neutral-2-transparent:#21201d33;
  --neutral-3:#2c2b28;  --neutral-3-transparent:#2c2b2833;
  --neutral-4:#393835;  --neutral-4-transparent:#39383533;
  --neutral-5:#52504c;  --neutral-5-transparent:#52504c33;
  --neutral-6:#797773;  --neutral-6-transparent:#79777333;
  --neutral-7:#a5a39f;  --neutral-7-transparent:#a5a39f33;
  --neutral-8:#c8c6c2;  --neutral-8-transparent:#c8c6c233;
  --neutral-9:#e6e5e3;  --neutral-9-transparent:#e6e5e333;
  --neutral-10:#ffffff; --neutral-10-transparent:#ffffff33;
  --option-badge-background:color-mix(in srgb, var(--color-1) 10%, transparent);
  --option-badge-foreground:#00d5d4;
  --navigation-active-foreground:#ffffff;
  --navigation-active-background:#00d5d433;
  --emphasis-chart-fill:#00d5d433;
  --emphasis-icon-background:#2c2b28; --emphasis-icon-foreground:#ffffff;
  --emphasis-type-background:#2c2b28; --emphasis-type-foreground:#ffffff;
  --cte-canvas:#000000; --cte-surface:#21201d; --cte-surface-muted:#2c2b28;
  --cte-text:#ffffff; --cte-text-muted:#a5a39f; --cte-border:rgb(0 0 0 / 0.1);
  --cte-accent:#00d5d4; --cte-accent-text:#000000; --cte-danger:#ff5263; --cte-focus:#00d5d4;
  color:var(--cte-text);
}
.on-dark{background:var(--cte-canvas)}
[data-theme="light"]{color:var(--cte-text)}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
*{font-synthesis:none}
em,i{font-style:normal}
html{-webkit-text-size-adjust:100%}
body{background:var(--cte-canvas);color:var(--cte-text);font-family:var(--font-ui);font-weight:var(--weight-ui-regular);font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--letter-spacing-m);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{list-style:none}
fieldset{border:0}
:focus-visible{outline:var(--focus-ring-outline);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.data{font-family:var(--font-data);font-variant-numeric:tabular-nums}

/* text steps: size, line height and tracking travel together */
.t-xxl{font-size:var(--size-xxl);line-height:var(--line-xxl);letter-spacing:var(--letter-spacing-xxl)}
.t-xl{font-size:var(--size-xl);line-height:var(--line-xl);letter-spacing:var(--letter-spacing-xl)}
.t-l{font-size:var(--size-l);line-height:var(--line-l);letter-spacing:var(--letter-spacing-l)}
.t-m{font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--letter-spacing-m)}
.t-s{font-size:var(--size-s);line-height:var(--line-s);letter-spacing:var(--letter-spacing-s)}
.t-xs{font-size:var(--size-xs);line-height:var(--line-xs);letter-spacing:var(--letter-spacing-xs)}
.t-xxs{font-size:var(--size-xxs);line-height:var(--line-xxs);letter-spacing:var(--letter-spacing-xxs)}
.muted{color:var(--cte-text-muted)}

h1,h2,h3,h4{font-family:var(--font-brand);font-weight:var(--weight-brand-medium);color:var(--cte-text)}
/* second clause of a headline reads quieter instead of switching colour */
h1 em,h2 em,h3 em,h4 em{color:var(--neutral-7)}

/* ---------- lockup (mark + wordmark) ---------- */
.lockup{display:inline-flex;align-items:center;gap:var(--space-xs);font-family:var(--font-brand);font-weight:var(--weight-brand-medium);font-size:var(--size-l);line-height:var(--line-l);letter-spacing:var(--letter-spacing-l);color:var(--cte-text)}
.lockup img{width:auto;height:var(--line-l);flex-shrink:0;object-fit:contain}
.on-dark .lockup img,[data-theme="dark"] .lockup img{content:url("qaba-light.svg")}

/* ---------- button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-m);border:0;border-radius:var(--radius-s);font-family:var(--font-ui);font-weight:var(--weight-ui-medium);font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--tracking-m);white-space:nowrap;text-align:center;transition:background-color var(--motion-duration) var(--motion-easing),box-shadow var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.btn:active:not(:disabled){transform:translateY(var(--motion-press-distance))}
.btn svg{width:var(--line-s);height:var(--line-s)}
.btn-primary{background:var(--neutral-10);color:var(--neutral-1);box-shadow:inset 0 0 0 var(--border-s) var(--neutral-10-transparent)}
.btn-primary:hover{box-shadow:inset 0 0 0 var(--border-s) var(--neutral-10-transparent),var(--shadow-s)}
.btn-secondary{background:var(--neutral-3);color:var(--neutral-10);box-shadow:0 0 0 var(--border-s) var(--neutral-3-transparent)}
.btn-secondary:hover{background:var(--neutral-4-transparent);box-shadow:0 0 0 var(--border-s) var(--neutral-4-transparent)}
.btn-outline{background:var(--color-none);color:var(--neutral-10);box-shadow:inset 0 0 0 var(--border-s) var(--neutral-4)}
.btn-outline:hover{background:var(--neutral-3-transparent)}
.btn-ghost{background:var(--color-none);color:var(--neutral-10);box-shadow:inset 0 0 0 var(--border-s) var(--color-none)}
.btn-ghost:hover{background:var(--neutral-3-transparent)}
.btn-primary:focus-visible,.btn-outline:focus-visible,.btn-ghost:focus-visible{box-shadow:inset 0 0 0 var(--border-s) var(--color-1-transparent)}
.btn-secondary:focus-visible{box-shadow:0 0 0 var(--border-s) var(--color-1-transparent)}
.btn:disabled,.btn[aria-disabled=true]{cursor:not-allowed;color:var(--neutral-6)}
.btn-primary:disabled,.btn-primary[aria-disabled=true]{background:var(--neutral-3);box-shadow:inset 0 0 0 var(--border-s) var(--neutral-4-transparent)}
.btn-secondary:disabled{box-shadow:0 0 0 var(--border-s) var(--neutral-4-transparent)}
.btn-outline:disabled{box-shadow:inset 0 0 0 var(--border-s) var(--neutral-4-transparent)}
.btn-block{display:flex;width:100%}
/* the accent fill is reserved for calls to action on dark bands */
.on-dark .btn-accent{background:var(--color-1);color:var(--cte-accent-text);box-shadow:inset 0 0 0 var(--border-s) var(--color-1-transparent)}

/* ---------- field / text field / select ---------- */
.field{display:grid;gap:var(--space-xs)}
.label{display:block;font-weight:var(--weight-ui-medium);font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--letter-spacing-m);color:var(--neutral-10)}
.desc{font-size:var(--size-m);line-height:var(--line-m);color:var(--neutral-7)}
.error{display:none;font-size:var(--size-m);line-height:var(--line-m);color:var(--error)}
.error.on{display:block}
.input{width:100%;min-width:0;padding:var(--space-xs) var(--space-s);border:0;border-radius:var(--radius-s);background:var(--neutral-1);color:var(--neutral-10);font-family:var(--font-ui);font-weight:var(--weight-ui-regular);font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--letter-spacing-m);box-shadow:0 0 0 var(--border-s) var(--neutral-4);appearance:none;-webkit-appearance:none;transition:box-shadow var(--motion-duration) var(--motion-easing)}
.input::placeholder{color:var(--neutral-6)}
.input:hover{box-shadow:0 0 0 var(--border-s) var(--neutral-5)}
.input:focus{box-shadow:0 0 0 var(--border-s) var(--color-1-transparent)}
.input[aria-invalid=true],.input.invalid{box-shadow:0 0 0 var(--border-s) var(--error)}
.input:disabled{background:var(--neutral-3);color:var(--neutral-6);box-shadow:0 0 0 var(--border-s) var(--neutral-4-transparent)}
.input[readonly]{background:var(--neutral-2);color:var(--neutral-8)}
select.input{padding-right:calc(var(--space-s) * 2 + var(--line-s));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716c61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-s) center;background-size:var(--line-s)}

/* ---------- checkbox ---------- */
.check{display:flex;gap:var(--space-xs);align-items:flex-start;font-size:var(--size-m);line-height:var(--line-m);color:var(--neutral-10);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:var(--line-s);height:var(--line-s);margin-top:calc((var(--line-m) - var(--line-s)) / 2);border-radius:var(--radius-xs);background:var(--neutral-1);box-shadow:inset 0 0 0 var(--border-s) var(--neutral-4);display:grid;place-items:center;cursor:pointer;transition:background-color var(--motion-duration) var(--motion-easing),box-shadow var(--motion-duration) var(--motion-easing)}
.check input:hover{box-shadow:inset 0 0 0 var(--border-s) var(--neutral-5)}
.check input:focus-visible{box-shadow:inset 0 0 0 var(--border-s) var(--color-1-transparent)}
.check input:checked{background:var(--color-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:inset 0 0 0 var(--border-s) var(--color-1-transparent)}
.check input:disabled{background-color:var(--neutral-3)}

/* ---------- radio card (radio group options rendered as selectable rows) ---------- */
.opt{position:relative;display:block;width:100%;text-align:left;background:var(--neutral-1);border-radius:var(--radius-m);padding:var(--space-s) var(--space-m);box-shadow:0 0 0 var(--border-s) var(--neutral-4);transition:box-shadow var(--motion-duration) var(--motion-easing),background-color var(--motion-duration) var(--motion-easing)}
.opt:hover{box-shadow:0 0 0 var(--border-s) var(--neutral-5)}
.opt[aria-checked=true]{box-shadow:0 0 0 var(--border-l) var(--color-1)}

/* ---------- surfaces ---------- */
.card{background:var(--neutral-1);border-radius:var(--radius-m);box-shadow:var(--border-shadow-s),var(--shadow-s)}
.surface{background:var(--cte-surface);border-radius:var(--radius-l)}
.surface-muted{background:var(--cte-surface-muted);border-radius:var(--radius-l)}

/* ---------- badge (static label, not interactive) ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-xxs);padding:0 var(--space-xs);border-radius:var(--radius-full);background:var(--emphasis-type-background);color:var(--emphasis-type-foreground);font-weight:var(--weight-ui-medium);font-size:var(--size-xs);line-height:var(--line-m);letter-spacing:var(--letter-spacing-xs);white-space:nowrap}
.badge.accent{background:var(--color-1-transparent)}
.badge.c2{background:var(--color-2-transparent)}
.badge.c3{background:var(--color-3-transparent)}
.badge.c4{background:var(--color-4-transparent)}

/* ---------- icon tile ---------- */
.icon-tile{display:grid;place-items:center;flex-shrink:0;width:calc(var(--line-m) + var(--space-s));height:calc(var(--line-m) + var(--space-s));border-radius:var(--radius-s);background:var(--emphasis-icon-background);color:var(--emphasis-icon-foreground)}
.icon{width:var(--line-s);height:var(--line-s);flex-shrink:0;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke-width);stroke-linecap:round;stroke-linejoin:round}

/* ---------- avatar ---------- */
.avatar{display:grid;place-items:center;flex-shrink:0;width:var(--line-l);height:var(--line-l);border-radius:var(--radius-full);background:var(--neutral-3);color:var(--neutral-8);font-weight:var(--weight-ui-medium);font-size:var(--size-xs);line-height:var(--line-xs)}

/* ---------- navigation menu (top nav links, popover, links) ---------- */
.nav-link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);font-weight:var(--weight-ui-medium);font-size:var(--size-m);line-height:var(--line-m);color:var(--neutral-10);transition:background-color var(--motion-duration) var(--motion-easing)}
.nav-link:hover,.nav-link[aria-expanded=true]{background:var(--neutral-3)}
.nav-link svg{width:var(--line-s);height:var(--line-s);transition:transform var(--motion-duration) var(--motion-easing)}
.nav-link[aria-expanded=true] svg{transform:rotate(180deg)}
.popover{background:var(--neutral-1);color:var(--neutral-10);border-radius:var(--radius-m);padding:var(--space-xs);box-shadow:0 0 0 var(--border-s) var(--neutral-4-transparent),var(--shadow-m)}
.side-link{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);font-size:var(--size-m);line-height:var(--line-m);color:var(--neutral-10);transition:background-color var(--motion-duration) var(--motion-easing)}
.side-link:hover{background:var(--neutral-3)}
.side-link[aria-current=page]{background:var(--navigation-active-background);color:var(--navigation-active-foreground);font-weight:var(--weight-ui-medium)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:var(--space-l);box-shadow:inset 0 calc(-1 * var(--border-s)) 0 var(--neutral-4)}
.tab{padding:var(--space-xs) 0;color:var(--neutral-6);font-size:var(--size-m);line-height:var(--line-m)}
.tab:hover{color:var(--neutral-10)}
.tab[aria-selected=true]{color:var(--neutral-10);box-shadow:inset 0 calc(-1 * var(--border-l)) 0 var(--neutral-10)}

/* ---------- accordion ---------- */
.acc-item{box-shadow:inset 0 calc(-1 * var(--border-s)) 0 var(--neutral-4)}
.acc-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);padding:var(--space-m) 0;border-radius:var(--radius-s);text-align:left;font-weight:var(--weight-ui-medium);font-size:var(--size-m);line-height:var(--line-m);color:var(--neutral-10)}
.acc-trigger .icon{color:var(--neutral-7);transition:transform var(--motion-duration) var(--motion-easing)}
.acc-item.open .acc-trigger .icon{transform:rotate(45deg)}
.acc-panel{max-height:0;overflow:hidden;color:var(--neutral-8);transition:max-height var(--motion-large-duration) var(--motion-large-easing)}
.acc-panel>*{padding-bottom:var(--space-m)}

/* ---------- dialog (non-modal prompt) ---------- */
.dialog{background:var(--neutral-1);color:var(--neutral-10);border-radius:var(--radius-m);padding:var(--space-l);display:grid;gap:var(--space-s);box-shadow:0 0 0 var(--border-s) var(--neutral-4-transparent),var(--shadow-l)}
.dialog-title{font-weight:var(--weight-ui-medium);font-size:var(--size-m);line-height:var(--line-m)}
.dialog-desc{color:var(--neutral-7)}
.icon-btn{display:grid;place-items:center;flex-shrink:0;width:calc(var(--line-m) + var(--space-xs) * 2);height:calc(var(--line-m) + var(--space-xs) * 2);border-radius:var(--radius-s);color:var(--neutral-10);transition:background-color var(--motion-duration) var(--motion-easing)}
.icon-btn:hover{background:var(--neutral-3-transparent)}

/* ---------- alert (form error summary) ---------- */
.alert{border-radius:var(--radius-m);padding:var(--space-s) var(--space-m);background:var(--error-transparent);color:var(--neutral-10);box-shadow:inset 0 0 0 var(--border-s) var(--error)}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}}