/* Halfie's design tokens: every colour, size, radius, shadow, spacing, font and timing the toolbar uses.
   Taken from halfie.co.uk (../halfie-website/src/styles/global.css and its components), with the
   same names as the website's, so a change there is easy to copy here.

   Used by the toolbar (toolbar.css imports this file inside its Shadow DOM: `:host`) and by the
   Halfie panel's pages on api.halfie.co.uk (`:root`). Change a value here and both follow.
   toolbar.css and toolbar.js hold no colour or size of their own (a test checks). */

:root, :host {
  /* ---- Type ------------------------------------------------------------------------------- */
  /* The website's font. The toolbar doesn't download it: if the page has it, it's used, otherwise
     the system's own sans-serif. */
  --font-sans: "Onest Variable", "Onest", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 12px;        /* badges, counts, small print */
  --text-sm: 13.5px;      /* notes, labels, the corner tag (the website's small print is 13.5px) */
  --text-md: 15px;        /* buttons with words, form fields (the website's pill buttons) */
  --text-lg: 19px;        /* a change's summary in the changes tray */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;     /* the website's button weight */
  --tracking-tight: -.01em;
  --leading: 1.35;
  --leading-tight: 1.15;  /* a change's summary */
  --leading-line: 18px;   /* one line of small print (keeps the history label from jumping) */

  /* ---- Colours: the website's palette ----------------------------------------------------- */
  --color-ink: #12142A;          /* text on light */
  --color-navy: #0F1440;         /* dark sections and the toolbar's glass tint */
  --color-navy-2: #1C2460;       /* hover on navy buttons */
  --color-navy-line: #2E3778;    /* lines and dividers on navy */
  --color-navy-ring: #3A4380;    /* rings on navy */
  --color-indigo: #6470E4;       /* Halfie blue: the primary action, "your changes" */
  --color-periwinkle: #8C96EC;   /* lighter indigo: hover on indigo, the history line */
  --color-lilac: #BFC8F5;        /* highlights on dark */
  --color-lilac-soft: #DEE2F7;   /* soft highlight */
  --color-cream: #EDE3CF;        /* warm accent */
  --color-paper: #FAFAFC;        /* text and icons on dark; the page background on the website */
  --color-white: #FFFFFF;        /* the selected ring and the white "earlier point" edge */
  --color-mist: #EDEEF4;         /* hover on light */
  --color-line: #E2E3EC;         /* lines on light */
  --color-ring: #C9CCE0;         /* rings on light */
  --color-slate: #4D5170;        /* secondary text on light */
  --color-on-dark: #B3B8DA;      /* secondary text on dark */
  --color-on-dark-2: #C7CBEF;    /* hover text on dark */
  --color-focus: var(--color-lilac); /* the keyboard focus ring (the website uses indigo on light; lilac reads on navy) */

  /* ---- Colours: status (from preview-toolbar.md; the website has no amber or green) -------- */
  --color-amber: #F5A524;        /* waiting, not yet reviewed, needs you (the orb's dot) */
  --color-green: #7EE2A8;        /* checks passed, reviewed, live */
  --color-on-status: #12142A;    /* text and icons on amber or green */

  /* ---- Glass: every surface of the toolbar (navy-tinted, so icons read over any page) ------- */
  --glass-bg: rgba(15, 20, 64, .72);           /* navy at 72% */
  --glass-bg-strong: rgba(15, 20, 64, .9);     /* trays with words (forms, lists): easier to read */
  --glass-blur: blur(18px) saturate(160%);
  --glass-border: rgba(255, 255, 255, .16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .14);   /* the inner top highlight */
  --glass-hover: rgba(255, 255, 255, .1);      /* a button's hover on glass */
  --glass-pressed: rgba(255, 255, 255, .18);   /* a toggled-on button */
  --glass-field: rgba(255, 255, 255, .08);     /* a text field on glass */
  --dim: .72;                                  /* opacity of the quiet buttons (switch, team) */
  --disabled: .38;                             /* opacity of a button that can't be used now */
  --faint: .4;                                 /* opacity of history dots after the one you picked */
  --toggle-live: rgba(126, 226, 168, .28);     /* the switch's track when it's on live (green, faint) */

  /* ---- The half-filled mark (the website's logo: indigo half leading; mirrored for live) ----- */
  --mark-fill: linear-gradient(90deg, var(--color-indigo) 50%, transparent 50%);
  --mark-fill-live: linear-gradient(270deg, var(--color-green) 50%, transparent 50%);

  /* ---- Shadows (the website's, navy-tinted) ------------------------------------------------ */
  --shadow-glass: 0 26px 44px -26px rgba(15, 20, 64, .5), 0 2px 8px rgba(15, 20, 64, .18);
  --shadow-tray: 0 40px 80px -30px rgba(15, 20, 64, .6);
  --shadow-send: 0 10px 24px -10px rgba(100, 112, 228, .8);   /* the glow under the send button */
  --dot-ring: 0 0 0 2px var(--color-navy);                     /* separates a dot or badge from what's under it */
  --dot-ring-light: 0 0 0 3px rgba(250, 250, 252, .25);        /* the current history step's halo */

  /* ---- Radii ------------------------------------------------------------------------------ */
  --radius-card: 12px;           /* the website's card radius: trays */
  --radius-pill: 999px;          /* the website's rounded-full: capsule, buttons, chips, notes */
  --radius-field: 10px;          /* text fields */

  /* ---- Sizes ------------------------------------------------------------------------------ */
  --size-orb: 52px;              /* the Halfie mark at rest */
  --size-primary: 44px;          /* primary buttons (a comfortable touch target) */
  --size-secondary: 36px;        /* quiet buttons */
  --size-mark: 24px;             /* the half-filled mark itself (the website's logo is 24px) */
  --size-mark-border: 2px;       /* the mark's outline */
  --size-icon: 20px;             /* stroke icons */
  --size-icon-stroke: 1.8;       /* icon line width (a number: SVG units) */
  --size-icon-stroke-bold: 2.6;  /* the tiny badge icons, so they still read */
  --size-icon-sm: 16px;          /* icons inside pill buttons with words */
  --size-badge-icon: 10px;       /* icons inside a chip's status badge */
  --size-sep: 3px;               /* the dot between "by Mia" and the status */
  --size-chip-text-w: 180px;     /* a change's summary in its chip is cut off after this */
  --tray-max-h: 60vh;            /* a tray scrolls past this height */
  --hover-grow: 1.3;             /* a history dot grows this much on hover (a scale) */
  --size-toggle-w: 52px;         /* the your changes / live switch */
  --size-toggle-h: 30px;
  --size-knob: 22px;
  --size-dot: 9px;               /* the amber "needs you" dot */
  --size-avatar: 28px;           /* a person's or change's initial in chips */
  --size-badge: 14px;            /* the small status badge on a chip */
  --size-history-dot: 10px;
  --size-history-dot-now: 16px;  /* the current step */
  --size-history-line: 2px;
  --size-step-w: 17px;          /* each step's room on the line (20 fit in a tray) */
  --size-edge: 3px;              /* the coloured viewport edge */
  --size-divider: 1px;
  --size-border: 1px;
  --size-ring: 2px;              /* the selected chip's ring and the focus ring */
  --size-ring-offset: 2px;
  --size-tray-w: 420px;          /* the widest a tray gets */
  --size-tag-w: 340px;           /* the widest the corner tag gets */
  --size-tip-w: 220px;           /* the widest a tooltip gets */
  --size-field-h: 40px;

  /* ---- Spacing ---------------------------------------------------------------------------- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;               /* the side gutter on phones */
  --space-6: 20px;
  --space-7: 28px;               /* the capsule's distance from the bottom edge */
  --gutter: 16px;                /* the least room left at the screen's edges */
  --divider-gap: 4px;            /* room either side of the capsule's thin dividers */
  --capsule-bottom: 28px;
  --tag-top: 16px;

  /* ---- Layers and motion ------------------------------------------------------------------ */
  --z: 2147483000;               /* above the site's own content */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: .15s;
  --slow: .3s;
  --tip-delay: .5s;              /* a tooltip appears after a short hover */
  --hold: 1s;                    /* a hold-to-confirm button fills over this long (toolbar.js HOLD_FOR says the same) */

  /* ---- Phone (read by toolbar.js too: 1 opens the Halfie panel in a tab, not a window) ------ */
  --phone: 0;
}

/* Phones: the website's own breakpoint (600px and narrower). */
@media (max-width: 600px) {
  :root, :host {
    --phone: 1;
    --size-primary: 36px;        /* smaller, so the whole capsule fits a 375px-wide phone */
    --size-secondary: 32px;
    --size-toggle-w: 42px;
    --size-toggle-h: 26px;
    --size-knob: 20px;
    --divider-gap: 2px;
    --capsule-bottom: 16px;
    --tag-top: 12px;
  }
}

/* People who ask for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  :root, :host {
    --fast: 0s;
    --slow: 0s;
    --tip-delay: 0s;
  }
}