/**
 * Tramline's brand layer.
 *
 * The palette is taken out of the product line rather than chosen for it:
 * flat-light snow for the page, the shadow side of a spruce for dark
 * sections, and the two case colors — Treeline Green and the limited
 * Retro Pink — as the only saturation on the site.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/app/shared/assets/fonts/archivo-latin-var.c214ffb7f5362987.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/app/shared/assets/fonts/plex-mono-400.d3ebbfd689654d3a.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/app/shared/assets/fonts/plex-mono-500.98e207f02528a563.woff2") format("woff2");
}

@layer tokens {
  :root {
    --snow: #f2f3f1;
    --snow-deep: #e7e9e5;
    --spruce: #0e1518;
    --spruce-soft: #1b2529;
    --slate: #46545a;
    --treeline: #5a6247;
    --flare: #ff2e88;

    --neutral-50: #fafbfa;
    --neutral-100: var(--snow);
    --neutral-200: #dcdfda;
    --neutral-300: #c3c8c1;
    --neutral-400: #9ba39c;
    --neutral-500: #78827c;
    --neutral-600: #5c6663;
    --neutral-700: var(--slate);
    --neutral-800: #242f33;
    --neutral-900: var(--spruce);
    --neutral-950: #070c0e;

    --bg: var(--snow);
    --bg-soft: #eceee9;
    --bg-muted: var(--snow-deep);
    --bg-panel: #f7f8f6;
    --bg-elevated: #fafbf9;
    --bg-canvas: var(--snow-deep);

    --ink: var(--spruce);
    --ink-soft: var(--slate);
    --ink-dim: #78827c;
    --ink-faint: #9ba39c;
    --ink-inverse: var(--snow);
    --bg-inverse: var(--spruce);

    --input-bg: var(--bg);
    --input-border: var(--rule-strong);
    --input-border-hover: var(--ink-dim);
    --input-placeholder: var(--ink-dim);

    --rule: #d6dad2;
    --rule-soft: #e2e5df;
    --rule-strong: #b9bfb6;

    --accent: var(--spruce);
    --accent-deep: #000000;
    --accent-soft: #e4e7e2;
    --accent-ink: var(--snow);
    --accent-edge: var(--rule-strong);

    --link-c: 0.02;
    --link-h: 200;

    --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --container-padding: var(--space-8);
    --measure: 62ch;

    /* The tramline: one hairline that every section hangs from. */
    --line: 1px solid var(--rule);
    --line-strong: 1px solid var(--spruce);
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --header-h: 4.25rem;
  }


  /**
   * A dark surface. Repointing the semantic tokens flips every nested
   * button, input and card without restyling any of them.
   */
  .on-spruce {
    --bg: var(--spruce);
    --bg-soft: var(--spruce-soft);
    --bg-muted: #223034;
    --bg-panel: var(--spruce-soft);
    --bg-elevated: var(--spruce-soft);

    --ink: var(--snow);
    --ink-soft: #b7c0be;
    --ink-dim: #8d9a98;
    --ink-faint: #6c7a78;

    --rule: #2b3a3e;
    --rule-soft: #1f2c30;
    --rule-strong: #3d4f53;

    --accent: var(--snow);
    --accent-deep: #ffffff;
    --accent-soft: #223034;
    --accent-ink: var(--spruce);
    --accent-edge: #3d4f53;

    /**
     * The per-component slots have to be repointed too. They are declared
     * at :root as var(--bg) and friends, so they were already substituted
     * with the light values before this class ever applies; overriding
     * --bg alone leaves an input white-on-white here.
     */
    --input-bg: var(--bg);
    --input-border: var(--rule-strong);
    --input-border-hover: var(--ink-dim);
    --input-border-focus: var(--accent);
    --input-placeholder: var(--ink-dim);

    background: var(--bg);
    color: var(--ink);
  }
}

@layer tokens {
  :root {
    --radius: 0;
    --radius-control: 0;
    --radius-surface: 0;
    --radius-tag: 0;

    --button-height: 2.75rem;
    --button-height-lg: 3.25rem;
    --button-height-hero: 3.75rem;
    --button-padding-x: 1.5rem;
    --button-padding-x-lg: 2rem;
    --button-font-size: var(--text-xs);
    --button-font-size-lg: var(--text-sm);
    --button-font-weight: var(--weight-semibold);

    --input-height: 2.75rem;
    --input-height-lg: 3.25rem;
    --input-font-size: var(--text-sm);
    --input-border: var(--rule-strong);
  }
}

/**
 * Dark mode. The design system flips the semantic tokens for us, but two
 * things need saying explicitly.
 */
@layer tokens {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /*
       * The component slots are declared at :root against the light values,
       * so they do not follow --bg on their own and an input comes out
       * light-on-light. Repoint them at the flipped tokens.
       */
      --input-bg: var(--bg);
      --input-border: var(--rule-strong);
      --input-border-hover: var(--ink-dim);
      --input-placeholder: var(--ink-dim);
    }
  }
}

/**
 * Product cutouts in dark mode.
 *
 * Studio shots are white-background JPEGs multiplied onto the page, which
 * is what makes them sit on the paper with no plate edge. Multiply needs a
 * light ground: on a dark page it turns a dark product into the
 * background. So in dark mode the tile gets its own snow plate and the
 * blend keeps working against that instead.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feature-photo.is-cutout,
  :root:not([data-theme="light"]) .shop-photo.is-cutout,
  :root:not([data-theme="light"]) .shot.is-cutout,
  :root:not([data-theme="light"]) .cart-thumb,
  :root:not([data-theme="light"]) .order-line figure {
    background: color-mix(in oklab, var(--snow) 58%, var(--spruce));
  }
}