/* Tide 1.0 — the entry stylesheet. Everything reachable from here is what a
 * rendered design gets, so every token file is imported here and nowhere else.
 */

@import "./fonts/fonts.css";
@import "./tokens/color.css";
@import "./tokens/space.css";
@import "./tokens/type.css";
@import "./tokens/motion.css";
@import "./tokens/effect.css";

/* --------------------------------------------------------------------------
 * Below this line are THIN HELPERS over the ruled tokens above — a root, the
 * type registers, and the channel binding. They are not components: Tide's
 * components live in Flutter and are not part of this project. Compose your
 * own layout out of these and out of var(--tide-*) directly.
 * ------------------------------------------------------------------------ */

/* Every Tide screen sits inside one of these. Add .tide-dark for the trench. */
.tide-root {
  background: var(--tide-surface);
  color: var(--tide-text-primary);
  font-family: var(--tide-font-voice);
  font-size: var(--tide-text-body-size);
  line-height: var(--tide-text-body-lh);
  font-weight: var(--tide-weight-regular);
  /* A time or an amount must not shift as it ticks. */
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

/* The register scale. Emphasis is weight, never size. */
.tide-display {
  font-size: var(--tide-text-display-size);
  line-height: var(--tide-text-display-lh);
  font-weight: var(--tide-weight-title);
  letter-spacing: -0.01em;
}
.tide-title {
  font-size: var(--tide-text-title-size);
  line-height: var(--tide-text-title-lh);
  font-weight: var(--tide-weight-title);
  letter-spacing: -0.01em;
}
.tide-section {
  font-size: var(--tide-text-section-size);
  line-height: var(--tide-text-section-lh);
  font-weight: var(--tide-weight-emphasis);
}
.tide-body {
  font-size: var(--tide-text-body-size);
  line-height: var(--tide-text-body-lh);
}
.tide-body-sm {
  font-size: var(--tide-text-body-sm-size);
  line-height: var(--tide-text-body-sm-lh);
}
.tide-meta {
  font-family: var(--tide-font-mono);
  font-size: var(--tide-text-meta-size);
  line-height: var(--tide-text-meta-lh);
  font-weight: var(--tide-weight-medium);
  color: var(--tide-text-secondary);
}

/* The eyebrow: mono, 10px, tracked wide, and SET UPPER — the tracking is
 * drawn for capitals and reads as a mistake in lower case. */
.tide-eyebrow {
  font-family: var(--tide-font-mono);
  font-size: var(--tide-size-eyebrow);
  line-height: var(--tide-line-height-eyebrow);
  font-weight: var(--tide-weight-emphasis);
  letter-spacing: var(--tide-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tide-eyebrow);
}

/* The wordmark. The only place 800 appears. */
.tide-wordmark {
  font-weight: var(--tide-weight-wordmark);
  letter-spacing: -0.01em;
}

/* Channel binding (G12). Put data-channel on any container and its five
 * channel values become available as --tide-ch-* inside it, so the same
 * markup carries any subject. Colour means SUBJECT MATTER, never importance. */
[data-channel="words"] {
  --tide-ch-core: var(--tide-channel-words-core);
  --tide-ch-edge: var(--tide-channel-words-edge);
  --tide-ch-wash: var(--tide-channel-words-wash);
  --tide-ch-ink: var(--tide-channel-words-ink);
  --tide-ch-on-canvas: var(--tide-channel-words-on-canvas);
}
[data-channel="time"] {
  --tide-ch-core: var(--tide-channel-time-core);
  --tide-ch-edge: var(--tide-channel-time-edge);
  --tide-ch-wash: var(--tide-channel-time-wash);
  --tide-ch-ink: var(--tide-channel-time-ink);
  --tide-ch-on-canvas: var(--tide-channel-time-on-canvas);
}
[data-channel="money"] {
  --tide-ch-core: var(--tide-channel-money-core);
  --tide-ch-edge: var(--tide-channel-money-edge);
  --tide-ch-wash: var(--tide-channel-money-wash);
  --tide-ch-ink: var(--tide-channel-money-ink);
  --tide-ch-on-canvas: var(--tide-channel-money-on-canvas);
}
[data-channel="system"] {
  --tide-ch-core: var(--tide-channel-system-core);
  --tide-ch-edge: var(--tide-channel-system-edge);
  --tide-ch-wash: var(--tide-channel-system-wash);
  --tide-ch-ink: var(--tide-channel-system-ink);
  --tide-ch-on-canvas: var(--tide-channel-system-on-canvas);
}
[data-channel="alert"] {
  --tide-ch-core: var(--tide-channel-alert-core);
  --tide-ch-edge: var(--tide-channel-alert-edge);
  --tide-ch-wash: var(--tide-channel-alert-wash);
  --tide-ch-ink: var(--tide-channel-alert-ink);
  --tide-ch-on-canvas: var(--tide-channel-alert-on-canvas);
}