/* Generated from lib/theme/app_colors.dart — do not edit by hand.
 * Run `node website/build.mjs` after changing the app palette. */
:root {
  --canvas: #F6F4F0;
  --surface: #FFFFFF;
  --surface-muted: #FAF8F5;
  --surface-sunken: #EDE9E3;

  --ink: #1A211F;
  /* Darkened 15% toward ink so secondary text clears AA on the tinted
   * surfaces too, not only on white. See derivedPalette(). */
  --ink-secondary: #5F6864;
  --ink-tertiary: #9AA39E;

  --line: #E4DFD8;
  --line-strong: #CFC8BF;

  /* Two teals on purpose: --brand for accents, --brand-fill under white text. */
  --brand: #0E8C7D;
  --brand-fill: #0A6B60;
  --brand-pressed: #08574E;
  --brand-wash: #EBF6F4;
  --brand-wash-line: rgba(14, 140, 125, 0.28);

  --amber: #C77F1A;
  /* For the note and badge icons, which are graphical objects and need 3:1
   * against amberWash. Plain amber gives 2.94:1. */
  --amber-strong: #AD711B;
  --amber-wash: #FBF3E6;
  --amber-line: rgba(199, 127, 26, 0.34);

  --error: #B3402F;
  --error-wash: #FBEEEB;
  --error-line: rgba(179, 64, 47, 0.3);

  --verified: #157F4A;

  --navy: #16302B;
  --navy-line: rgba(235, 246, 244, 0.22);

  --radius-control: 14px;
  --radius-card: 18px;
  --radius-pill: 28px;

  /* An elevation scale, so shadows are consistent instead of improvised at
   * each call site. Neutral black at low alpha rather than a tinted shadow:
   * a coloured shadow would be a new hue by the back door. */
  --shadow-1: 0 1px 2px rgba(26, 33, 31, 0.05);
  --shadow-2: 0 4px 12px rgba(26, 33, 31, 0.06);
  --shadow-3: 0 10px 26px rgba(26, 33, 31, 0.08);
  --shadow-4: 0 18px 44px rgba(26, 33, 31, 0.1);

  /* Gradients, each between two colours that already exist in the palette.
   * --grad-ink gives the dark hero depth without introducing a third colour;
   * --grad-brand is for accents that are already solid brand. */
  --grad-ink: linear-gradient(
    165deg,
    #16302B 0%,
    #182824 100%
  );
  --grad-brand: linear-gradient(
    92deg,
    #0A6B60 0%,
    #08574E 100%
  );

  --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='90' viewBox='0 0 78 90'%3E%3Cpath d='M39 1 L74 21 L74 61 L39 81 L4 61 L4 21 Z' fill='none' stroke='rgba(14%2C%20140%2C%20125%2C%200.14)' stroke-width='1.5'/%3E%3C/svg%3E");
  --cross-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 L10 10 M10 2 L2 10' stroke='%23B3402F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Dark mode uses only tokens that already exist in the app palette. A lighter
 * teal would read better here, but inventing one would put a colour on the web
 * that no one has reviewed against the brand. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #16302B;
    --surface: #1A211F;
    --surface-muted: #1A211F;
    --surface-sunken: #1A211F;

    --ink: #F6F4F0;
    --ink-secondary: rgba(235, 246, 244, 0.78);
    --ink-tertiary: rgba(235, 246, 244, 0.55);

    --line: rgba(235, 246, 244, 0.18);
    --line-strong: rgba(235, 246, 244, 0.3);

    --brand: #EBF6F4;
    --brand-fill: #EBF6F4;
    --brand-pressed: #FFFFFF;
    --brand-wash: rgba(235, 246, 244, 0.14);
    --brand-wash-line: rgba(235, 246, 244, 0.3);
  }

  /* On dark, a "filled" button is a light chip with dark text. */
  .btn--primary {
    background: #EBF6F4;
    color: #16302B;
  }

  .btn--primary:hover {
    background: #FFFFFF;
    color: #16302B;
  }

  a.tile:hover {
    border-color: rgba(235, 246, 244, 0.6);
  }

  .badge--amber,
  .note--amber,
  .note--error {
    color: #F6F4F0;
  }

  .footer {
    border-top: 1px solid rgba(235, 246, 244, 0.18);
  }
}