/* Canonical giveme.cloud design tokens; copied from the pinned source named by GIV-74. */
:root {
  --canvas:#F4F5F8;--surface:#FFFFFF;--subtle:#EBEEF5;--border:#E2E5EC;--border-hover:#C8CEDD;
  --ink:#0B1020;--muted:#5A6075;--accent:#047857;--accent-strong:#065F46;--accent-bright:#059669;
  --accent-fg:#FFFFFF;--accent-wash:color-mix(in srgb,var(--accent-bright) 12%,transparent);--ring:#047857;
  --dark-bg:#0B1020;--dark-fg:#F4F5F8;--dark-muted:#94A0BC;
  --font-display:'Schibsted Grotesk',system-ui,sans-serif;--font-body:'Hanken Grotesk',system-ui,sans-serif;
  --h1:clamp(40px,6vw,68px);--h2:clamp(28px,4vw,42px);--h3:19px;--body-lg:19px;--body:16px;--small:14px;--caption:12.5px;
  --tracking-display:-.02em;--leading-display:1.08;
  --r-input:10px;--r-btn:11px;--r-icon:12px;--r-btn-lg:13px;--r-spec:14px;--r-card:16px;--r-lg:18px;--r-pill:999px;
  --shadow-card:0 18px 40px -30px rgba(11,16,32,.5);--shadow-lift:0 30px 60px -40px rgba(11,16,32,.5);
  --transition:.15s;--section-y:72px;--container:1180px;--container-pad:28px;
  --success:#10B981;--warning:#F59E0B;--error:#EF4444;--info:#3B82F6;
}

/* GIV-235 S16: the semantic colour tokens for everything the two blocks above do
   not name. Each value is the literal the stylesheets used to write, moved here
   unchanged, so the light appearance is the one that shipped. This file is the
   only place that names a colour: control-room.css, native.css, action-notice.css,
   the scripts and the shell's SVG take every colour from a token (a Go test,
   TestGIV235NoColourLiteralsOutsideTokens, fails on any other), so a theme
   redefines these names and nothing else.

   The names say what a colour is for. The status colours (--success, --warning,
   --error, --info, and the badge, notice and danger tints below) are not drawn
   from --accent, so a different accent never repaints a status. */
:root{
  /* Neutral fills and lines. */
  --hover:#f5f6f9;--surface-soft:#f8f9fb;--table-head:#fafbfc;--table-head-ink:#6d7488;--row-hover:#fcfdfd;
  --subtle-hover:#dfe3ec;--field-border:#838ca1;
  /* Badges: a tinted surface, its text and, for the neutral one, its dot. */
  --badge-bg:#f0f2f6;--badge-neutral-bg:#eef0f3;--badge-neutral-ink:#5d6675;--badge-neutral-dot:#8a93a1;
  --badge-success-bg:#e8f8f2;--badge-success-ink:#087654;--badge-warning-bg:#fff5df;--badge-warning-ink:#875900;
  --badge-error-bg:#fdeced;--badge-error-ink:#a9222f;
  /* Notices and danger controls. */
  --info-wash:#f0f5fc;--warning-wash:#fff8e8;--danger-wash:#fff1f2;
  --danger-ink:#bd1e2d;--danger-border:#f1c8cd;--danger-border-hover:#e8a3ab;
  /* The accent as a tint and as text on a dark surface. */
  --accent-tint:#e8f5f0;--accent-on-dark:#8BDCBF;
  /* Depth: a card's shadow and a switch knob's shadow. (The veil behind a dialog, --scrim, is
     set on ::backdrop itself; see the end of this file.) */
  --shadow-soft:0 12px 30px -30px rgba(11,16,32,.55);--shadow-knob:0 1px 2px rgba(11,16,32,.3);
  /* The logo: the two bars, the lime bar and the muted ".cloud". */
  --brand-ink:#0C0D0E;--brand-mark:#84CC16;--brand-muted:#56565C;
}

/* GIV-235 S17: the theme. System, Light or Dark is one attribute on <html>:
   theme.js sets data-theme to "light" or "dark" from the reader's stored choice
   and sets nothing for System. Everything above is the light theme. The dark
   theme is written twice below with the same declarations: once for a page whose
   reader chose nothing and whose system prefers dark (System follows
   prefers-color-scheme with no script at all), and once for a reader who chose
   Dark. A reader who chose Light on a dark system gets neither, so the light
   values above stand. A test holds the two copies identical.

   color-scheme is set with the tokens, so the browser's own controls, scrollbars,
   dialogs and default link colours follow the theme the tokens draw. The dark
   surfaces are the brand's own dark palette (--dark-bg, --dark-fg, --dark-muted)
   and mixes of it, as the GIV-216 dark draft used. The status colours and the
   lime of the logo are the same in both themes, and so is the accent fill, whose
   text (--accent-fg) is the same white. */
:root{
  color-scheme:light;
  /* Roles the dark theme needs a name for. In light each is what the panel already
     drew, so the light appearance does not move. --accent-text is the accent where
     it is a link, a line, a ring or a mark on a surface; --accent stays the fill of
     a button, with --accent-fg on it. --danger-solid is the fill of the danger
     button and --on-danger its text, whatever the accent: the status red under
     white text is 3.76:1, this one 4.83:1. */
  --accent-text:var(--accent);--accent-text-strong:var(--accent-strong);
  --field-bg:var(--surface);--field-border-hover:#5f677c;--knob:#ffffff;--danger-solid:#dc2626;--on-danger:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:var(--dark-bg);--surface:color-mix(in srgb,var(--dark-bg) 94%,var(--dark-fg));
    --subtle:color-mix(in srgb,var(--dark-bg) 88%,var(--dark-fg));--border:color-mix(in srgb,var(--dark-bg) 84%,var(--dark-fg));
    --border-hover:color-mix(in srgb,var(--dark-bg) 76%,var(--dark-fg));
    --ink:var(--dark-fg);--muted:var(--dark-muted);
    --accent-wash:color-mix(in srgb,var(--accent-bright) 22%,transparent);--ring:var(--accent-on-dark);
    --accent-text:var(--accent-on-dark);--accent-text-strong:color-mix(in srgb,var(--accent-on-dark) 60%,white);
    --hover:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));--surface-soft:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));
    --table-head:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));--table-head-ink:var(--dark-muted);
    --row-hover:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));--subtle-hover:color-mix(in srgb,var(--dark-bg) 80%,var(--dark-fg));
    --field-bg:var(--dark-bg);--field-border:color-mix(in srgb,var(--dark-bg) 56%,var(--dark-fg));
    --field-border-hover:color-mix(in srgb,var(--dark-bg) 40%,var(--dark-fg));--knob:var(--dark-fg);
    --badge-bg:color-mix(in srgb,var(--surface) 84%,var(--dark-muted));--badge-neutral-bg:color-mix(in srgb,var(--surface) 84%,var(--dark-muted));
    --badge-neutral-ink:color-mix(in srgb,var(--dark-muted) 70%,var(--dark-fg));--badge-neutral-dot:var(--dark-muted);
    --badge-success-bg:color-mix(in srgb,var(--surface) 84%,var(--success));--badge-success-ink:color-mix(in srgb,var(--success) 55%,var(--dark-fg));
    --badge-warning-bg:color-mix(in srgb,var(--surface) 84%,var(--warning));--badge-warning-ink:color-mix(in srgb,var(--warning) 55%,var(--dark-fg));
    --badge-error-bg:color-mix(in srgb,var(--surface) 84%,var(--error));--badge-error-ink:color-mix(in srgb,var(--error) 55%,var(--dark-fg));
    --info-wash:color-mix(in srgb,var(--surface) 88%,var(--info));--warning-wash:color-mix(in srgb,var(--surface) 88%,var(--warning));
    --danger-wash:color-mix(in srgb,var(--surface) 88%,var(--error));--danger-ink:color-mix(in srgb,var(--error) 60%,var(--dark-fg));
    --danger-border:color-mix(in srgb,var(--surface) 55%,var(--error));--danger-border-hover:color-mix(in srgb,var(--surface) 35%,var(--error));
    --accent-tint:color-mix(in srgb,var(--surface) 82%,var(--accent-bright));
    --shadow-card:0 18px 40px -30px rgba(0,0,0,.7);--shadow-lift:0 30px 60px -40px rgba(0,0,0,.8);
    --shadow-soft:0 12px 30px -30px rgba(0,0,0,.8);--shadow-knob:0 1px 2px rgba(0,0,0,.5);
    --brand-ink:var(--dark-fg);--brand-muted:var(--dark-muted);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:var(--dark-bg);--surface:color-mix(in srgb,var(--dark-bg) 94%,var(--dark-fg));
  --subtle:color-mix(in srgb,var(--dark-bg) 88%,var(--dark-fg));--border:color-mix(in srgb,var(--dark-bg) 84%,var(--dark-fg));
  --border-hover:color-mix(in srgb,var(--dark-bg) 76%,var(--dark-fg));
  --ink:var(--dark-fg);--muted:var(--dark-muted);
  --accent-wash:color-mix(in srgb,var(--accent-bright) 22%,transparent);--ring:var(--accent-on-dark);
  --accent-text:var(--accent-on-dark);--accent-text-strong:color-mix(in srgb,var(--accent-on-dark) 60%,white);
  --hover:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));--surface-soft:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));
  --table-head:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));--table-head-ink:var(--dark-muted);
  --row-hover:color-mix(in srgb,var(--dark-bg) 91%,var(--dark-fg));--subtle-hover:color-mix(in srgb,var(--dark-bg) 80%,var(--dark-fg));
  --field-bg:var(--dark-bg);--field-border:color-mix(in srgb,var(--dark-bg) 56%,var(--dark-fg));
  --field-border-hover:color-mix(in srgb,var(--dark-bg) 40%,var(--dark-fg));--knob:var(--dark-fg);
  --badge-bg:color-mix(in srgb,var(--surface) 84%,var(--dark-muted));--badge-neutral-bg:color-mix(in srgb,var(--surface) 84%,var(--dark-muted));
  --badge-neutral-ink:color-mix(in srgb,var(--dark-muted) 70%,var(--dark-fg));--badge-neutral-dot:var(--dark-muted);
  --badge-success-bg:color-mix(in srgb,var(--surface) 84%,var(--success));--badge-success-ink:color-mix(in srgb,var(--success) 55%,var(--dark-fg));
  --badge-warning-bg:color-mix(in srgb,var(--surface) 84%,var(--warning));--badge-warning-ink:color-mix(in srgb,var(--warning) 55%,var(--dark-fg));
  --badge-error-bg:color-mix(in srgb,var(--surface) 84%,var(--error));--badge-error-ink:color-mix(in srgb,var(--error) 55%,var(--dark-fg));
  --info-wash:color-mix(in srgb,var(--surface) 88%,var(--info));--warning-wash:color-mix(in srgb,var(--surface) 88%,var(--warning));
  --danger-wash:color-mix(in srgb,var(--surface) 88%,var(--error));--danger-ink:color-mix(in srgb,var(--error) 60%,var(--dark-fg));
  --danger-border:color-mix(in srgb,var(--surface) 55%,var(--error));--danger-border-hover:color-mix(in srgb,var(--surface) 35%,var(--error));
  --accent-tint:color-mix(in srgb,var(--surface) 82%,var(--accent-bright));
  --shadow-card:0 18px 40px -30px rgba(0,0,0,.7);--shadow-lift:0 30px 60px -40px rgba(0,0,0,.8);
  --shadow-soft:0 12px 30px -30px rgba(0,0,0,.8);--shadow-knob:0 1px 2px rgba(0,0,0,.5);
  --brand-ink:var(--dark-fg);--brand-muted:var(--dark-muted);
}

/* The veil behind a dialog. A dialog's ::backdrop is drawn in the top layer and,
   until Chrome 122, Firefox 120 and Safari 17.4, did not inherit from its element,
   so a custom property set on :root never reached it: native.css's
   background:var(--scrim) resolved to nothing and the dialog opened over a page
   that was not dimmed, in either theme. --scrim is therefore set on the backdrop
   itself and nowhere else, in the three ways a theme is selected (the light values,
   then the dark ones under prefers-color-scheme and under data-theme, held the same
   by a test as the dark blocks above are). A dark rule is more specific than the
   light one, so it wins where it applies, whether or not the browser inherits. */
::backdrop{--scrim:rgba(11,16,32,.55)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) ::backdrop{--scrim:rgba(0,0,0,.65)}
}
:root[data-theme="dark"] ::backdrop{--scrim:rgba(0,0,0,.65)}