/*
 * Design tokens, ported from the Android apps (their designtokens and app palettes). Names mirror the Android roles, so
 * `colors.content.primary` is `--color-content-primary` and `typography.label.strong` is
 * `--type-label-strong`. Change a value here once; ui.css only reads tokens.
 *
 * Colors are written light-dark(light, dark) and follow the visitor's system theme.
 * [data-theme] on <body> is the *product* (grinta, basketball), not light/dark.
 */

/* Roboto Flex, self-hosted and preloaded from base.webc, so it is usually in hand before first paint and nothing swaps. Latin only (the site is
   English); the opsz, wdth and wght axes, with their full ranges. swap is the safety net on a slow connection. Open Font License. */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/assets/fonts/roboto-flex-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Matches Arial to Roboto Flex's metrics, so text doesn't jump when the web font arrives. */
@font-face {
  font-family: "Roboto Flex Fallback";
  src: local("Arial");
  size-adjust: 99.8%;
  ascent-override: 92.95%;
  descent-override: 24.46%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* ---- Color: raw palette (Android RawColors) ---- */
  --raw-red: light-dark(#ff383c, #ff4245);
  --raw-orange: light-dark(#ff8d28, #ff9230);
  --raw-yellow: light-dark(#ffcc00, #ffd600);
  --raw-green: light-dark(#34c759, #30d158);
  --raw-mint: light-dark(#00c8b3, #00dac3);
  --raw-teal: light-dark(#00c3d0, #00d2e0);
  --raw-cyan: light-dark(#00c0e8, #3cd3fe);
  --raw-blue: light-dark(#0088ff, #0091ff);
  --raw-indigo: light-dark(#6155f5, #6d7cff);
  --raw-purple: light-dark(#cb30e0, #db34f2);
  --raw-pink: light-dark(#ff2d55, #ff375f);
  --raw-brown: light-dark(#ac7f5e, #b78a66);
  --raw-black: #000000;
  --raw-white: #ffffff;
  --raw-grey: #8e8e93;

  /* ---- Color: roles ---- */
  --color-background-primary: light-dark(#fef7ff, #141218);
  --color-background-secondary: light-dark(#f3edf7, #211f26);

  --color-surface-primary: light-dark(rgb(147 143 150 / 0.2), rgb(118 121 125 / 0.3));
  --color-surface-secondary: light-dark(rgb(147 143 150 / 0.15), rgb(118 121 125 / 0.25));
  --color-surface-tertiary: light-dark(rgb(147 143 150 / 0.1), rgb(118 121 125 / 0.15));

  --color-content-primary: light-dark(#000000, #ffffff);
  --color-content-secondary: light-dark(rgb(56 58 62 / 0.6), rgb(230 233 240 / 0.6));
  /* About 2.5:1 on the background: placeholders and borders only, never readable text. */
  --color-content-tertiary: light-dark(rgb(56 58 62 / 0.3), rgb(230 233 240 / 0.3));

  --color-border-primary: var(--color-content-tertiary);
  --color-border-secondary: light-dark(rgb(56 58 62 / 0.15), rgb(230 233 240 / 0.15));

  --color-feedback-neutral: var(--raw-grey);
  --color-feedback-on-neutral: var(--raw-black);
  --color-feedback-danger: var(--raw-red);
  --color-feedback-warning: var(--raw-orange);
  --color-feedback-success: var(--raw-green);

  /* Tonsser itself has no accent: content-primary on the inverse background. Products override both. */
  --color-brand-accent: var(--color-content-primary);
  --color-brand-on-accent: var(--color-background-primary);

  /* ---- Color: decorative gradients (Android BackgroundGradientColors), bottom left to top right.
     The same CSS Color 4 `in oklch` blend the Android app reproduces by hand. ---- */
  --gradient-home: linear-gradient(to top right in oklch, var(--raw-purple), var(--raw-orange));
  --gradient-minutes: linear-gradient(to top right in oklch, var(--raw-green), var(--raw-teal));
  --gradient-profile: linear-gradient(to top right in oklch, var(--raw-teal), var(--raw-indigo));
  --gradient-onboarding: linear-gradient(to top right in oklch, var(--raw-indigo), var(--raw-teal));
  /* Neutral: no hue at all, so it sits quietly above the product gradients (the Tonsser home hero). */
  --gradient-neutral: linear-gradient(to top right in oklch, var(--raw-black), var(--raw-white));
  /* The Grinta product card on the home page: mint to green, a little steeper than the corner to corner ones. */
  --gradient-grinta: linear-gradient(22deg in oklch, var(--raw-mint), var(--raw-green));
  /* The basketball product card: the home pair, steeper, with the purple held for the first tenth. */
  --gradient-basketball: linear-gradient(30deg in oklch, var(--raw-purple) 9%, var(--raw-orange));

  /* ---- Typography: Roboto Flex everywhere, regular axes unless a style says otherwise ---- */
  --font-sans: "Roboto Flex", "Roboto Flex Fallback", system-ui, sans-serif;
  /* The Android display setting: Roboto Flex at its narrowest width, with a fixed optical size. */
  --font-variation-strong: "wdth" 25, "opsz" 35;
  /* The condensed styles are always set in capitals. */
  --text-transform-strong: uppercase;

  /* font shorthand tokens: weight size/line-height family. Tracking is separate. 16sp is 1rem. */
  --type-hero-large: 600 5rem/4.5rem var(--font-sans);
  --type-hero-small: 600 3rem/3rem var(--font-sans);
  --type-display-large: 500 2.5rem/2.5rem var(--font-sans);
  --type-display-medium: 500 1.5rem/1.5rem var(--font-sans);
  --type-display-small: 500 1rem/1rem var(--font-sans);
  --type-header-large: 500 2rem/2.5rem var(--font-sans);
  --type-header-medium: 500 1.5rem/2rem var(--font-sans);
  --type-header-small: 500 1.375rem/1.75rem var(--font-sans);
  --type-nav-title: 500 1.25rem/1.25rem var(--font-sans);
  --type-body: 400 1rem/1.5rem var(--font-sans);
  --type-body-strong: 500 1rem/1.5rem var(--font-sans);
  --type-label: 400 0.875rem/1.25rem var(--font-sans);
  --type-label-strong: 500 0.875rem/1.25rem var(--font-sans);
  --type-utility: 400 0.75rem/1rem var(--font-sans);
  --type-utility-strong: 500 0.75rem/1rem var(--font-sans);
  --tracking-body: 0.03125em;
  --tracking-label: 0.0179em;
  --tracking-utility: 0.0333em;

  /* ---- Shape ---- */
  --radius-sm: 8px;
  --radius-tile: 12px;
  --radius-card: 20px;
  --radius-pill: 9999px;
  --hairline: 1px;
  --button-height: 3rem;

  /* ---- Space (4 / 8 / 16 / 24 match the Android scale; 5 and 6 are section rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
  --space-6: 5rem;

  /* ---- Layout (web only) ---- */
  --width: 68rem;
  --width-narrow: 36rem;
  --width-wide: 90rem;
  --overlap: 8rem;
  /* Vertical rhythm (web only). Roomy on desktop, tighter under 48rem (see the media query below). Everything that sets space around or inside a card, a section or the header reads these. */
  --header-padding: 2rem;
  --section-gap: var(--space-6);
  --card-gap: 4rem;
  --card-padding: 4rem;
  --card-stack: 2rem; /* between a card's title block, its copy and its action */
  /* Sticky header: its vertical padding twice, the logo height and the bottom hairline. Heroes with a video slide up under it by this much. */
  --header-height: calc(var(--header-padding) * 2 + 1.5rem + var(--hairline));
  /* The scrolled header is the page background at this strength, over a blur of what scrolls behind it. */
  --header-fill: 85%;
  --header-blur: 16px;
  /* Cards are translucent surfaces; this blurs whatever sits behind them (the video hero they overlap). */
  --card-blur: 16px;
}

@media (min-resolution: 2dppx) {
  :root { --hairline: 0.5px; }
}
@media (max-width: 47.99rem) {
  :root { --header-padding: 1.5rem; --section-gap: 3.5rem; --card-gap: var(--space-5); --card-padding: 2rem; --card-stack: 1.5rem; }
}

/* Derived from the accent, so it is recomputed wherever a product changes the accent. */
:root, [data-theme] {
  --color-brand-tint: color-mix(in srgb, var(--color-brand-accent) 15%, transparent);
  /* Laid over a gradient button fill in light mode, to deepen it under its near-white label: the gradient itself stays the one source. */
  --color-brand-fill-shade: light-dark(rgb(0 0 0 / 0.15), transparent);
}

/* Per-product identity: accent, and Grinta's gradient pairs (its home/profile are swapped from the default). */
[data-theme="basketball"] {
  --color-brand-fill: linear-gradient(var(--color-brand-fill-shade) 0 0), var(--gradient-basketball); /* filled buttons: the product's gradient instead of its flat accent (testing), shaded in light mode */
  --color-brand-on-fill: var(--color-background-primary); /* its label: the page's own background color, so it flips with the scheme */
  --color-brand-accent: var(--raw-orange);
  --color-brand-on-accent: var(--raw-black);
}
[data-theme="grinta"] {
  --color-brand-fill: linear-gradient(var(--color-brand-fill-shade) 0 0), var(--gradient-grinta); /* filled buttons: the product's gradient instead of its flat accent (testing), shaded in light mode */
  --color-brand-on-fill: var(--color-background-primary); /* its label: the page's own background color, so it flips with the scheme */
  --color-brand-accent: var(--raw-green);
  --color-brand-on-accent: var(--raw-black);
  --gradient-home: linear-gradient(to top right in oklch, var(--raw-teal), var(--raw-indigo));
  --gradient-profile: linear-gradient(to top right in oklch, var(--raw-purple), var(--raw-orange));
}