/*
  Hallpass design tokens, shared by the hold screen, the extension popup and the parent app.

  The brand palette comes from tryhallpass.com and is fixed. The dark set is derived from the
  site's night stage. Contrast (WCAG), measured on the surfaces each pair is used on:
    light: ink on paper 14.5 · ink-2 on paper 6.8 · ink-3 on paper 5.2, on lavender-soft 4.7
           paper on evergreen 5.9 · ink on lime 13.2 · ink on lavender 11.3 · danger 6.0
    dark:  ink on bg 15.3 · ink-2 on card 7.9 · ink-3 on card 5.5 · lime on bg 14.6 · danger 6.4

  Pages get the light set on :root and follow the system theme unless data-theme is set.
  Shadow-DOM components (the hold screen) set data-theme on their host to match YouTube.
  Every name starts with --hp- so nothing collides with the page we sit on.
*/

:root,
:host {
  --hp-font-sans: "Hallpass Inter", "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --hp-font-display: "Hallpass Calistoga", "Calistoga", ui-serif, Georgia, serif;

  /* Brand */
  --hp-evergreen: #326954;
  --hp-evergreen-deep: #27533f;
  --hp-lime: #ddf49b;
  --hp-lime-deep: #c9e57a;
  --hp-lavender: #dcd6f7;
  --hp-lavender-soft: #ebe7fb;
  --hp-night: #172523;

  /* Surfaces and text */
  --hp-bg: #f6f5f0;
  --hp-surface: #eeece4;
  --hp-card: #fcfbf8;
  --hp-rule: #dddbd2;
  --hp-ink: #172523;
  --hp-ink-2: #4b5856;
  --hp-ink-3: #5e6967;

  /* Roles */
  --hp-primary: var(--hp-evergreen);
  --hp-primary-hover: var(--hp-evergreen-deep);
  --hp-on-primary: #f6f5f0;
  --hp-strong: #172523;
  --hp-strong-hover: #2c403c;
  --hp-on-strong: #f6f5f0;
  --hp-yes: var(--hp-lime);
  --hp-on-yes: #172523;
  --hp-calm: var(--hp-lavender);
  --hp-calm-soft: var(--hp-lavender-soft);
  --hp-on-calm: #172523;
  --hp-set-aside: var(--hp-lavender-soft);
  --hp-focus: var(--hp-evergreen);
  --hp-danger: #b42318;
  --hp-scrim: rgb(23 37 35 / 0.42);

  /* Akita stays the same dog in both themes */
  --akita-coat: #cc6d3b;
  --akita-coat-shade: #ad552b;
  --akita-coat-deep: #8f4321;
  --akita-cream: #faf1e4;
  --akita-cream-shade: #ecdcc5;
  --akita-ink: #2b1e18;
  --akita-collar: #326954;
  --akita-tag: #ddf49b;

  /* Shape and depth */
  --hp-radius-sm: 8px;
  --hp-radius: 14px;
  --hp-radius-lg: 20px;
  --hp-radius-pill: 999px;
  --hp-shadow-card: 0 1px 0 rgb(23 37 35 / 0.04), 0 12px 32px -12px rgb(23 37 35 / 0.18);
  --hp-shadow-float: 0 1px 0 rgb(23 37 35 / 0.05), 0 28px 60px -24px rgb(23 37 35 / 0.32);

  /* Motion */
  --hp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hp-ease-in: cubic-bezier(0.55, 0, 0.9, 0.4);
  --hp-fast: 160ms;
  --hp-base: 260ms;
  --hp-slow: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hp-bg: #111b19;
    --hp-surface: #172523;
    --hp-card: #1c2b28;
    --hp-rule: #2c403c;
    --hp-ink: #eef0ea;
    --hp-ink-2: #b4c1bc;
    --hp-ink-3: #93a29d;
    --hp-primary: var(--hp-lime);
    --hp-primary-hover: var(--hp-lime-deep);
    --hp-on-primary: #172523;
    --hp-strong: #eef0ea;
    --hp-strong-hover: #d6dcd4;
    --hp-on-strong: #172523;
    --hp-calm-soft: #24283a;
    --hp-set-aside: #1c2b28;
    --hp-focus: var(--hp-lime);
    --hp-danger: #ff8a7a;
    --hp-scrim: rgb(5 10 9 / 0.62);
    --hp-shadow-card: 0 1px 0 rgb(0 0 0 / 0.2), 0 12px 32px -12px rgb(0 0 0 / 0.6);
    --hp-shadow-float: 0 1px 0 rgb(0 0 0 / 0.2), 0 28px 60px -24px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"],
:host([data-theme="dark"]) {
  --hp-bg: #111b19;
  --hp-surface: #172523;
  --hp-card: #1c2b28;
  --hp-rule: #2c403c;
  --hp-ink: #eef0ea;
  --hp-ink-2: #b4c1bc;
  --hp-ink-3: #93a29d;
  --hp-primary: var(--hp-lime);
  --hp-primary-hover: var(--hp-lime-deep);
  --hp-on-primary: #172523;
  --hp-strong: #eef0ea;
  --hp-strong-hover: #d6dcd4;
  --hp-on-strong: #172523;
  --hp-calm-soft: #24283a;
  --hp-set-aside: #1c2b28;
  --hp-focus: var(--hp-lime);
  --hp-danger: #ff8a7a;
  --hp-scrim: rgb(5 10 9 / 0.62);
  --hp-shadow-card: 0 1px 0 rgb(0 0 0 / 0.2), 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --hp-shadow-float: 0 1px 0 rgb(0 0 0 / 0.2), 0 28px 60px -24px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}