/* Race Roster auth-frontend design tokens.
 *
 * Centralised CSS custom properties for the auth surface. We ship CSS
 * Modules + tokens instead of importing `@ory/elements-react/theme/styles.css`
 * because the sign-in page is a fully headless composition of Ory primitives;
 * see `app/main.tsx` for the matching decision.
 *
 * Colours / type / radius values mirror `@fastnorth/kraken` (`globals.css`): we
 * use full `hsl()` here because this bundle does not load Kraken’s theme layer
 * (no Tailwind / ThemeProvider), but numeric components match `--gray-*`,
 * `--primary`, `--destructive`, `--font-*`, `--base-unit`, `--radius`, etc.
 */

:root {
  /* Layout unit (Kraken --base-unit) */
  --rr-base-unit: 4px;

  /* Colour — semantic UI (Kraken semantic → same HSL components) */
  /* --background = --gray-10 */
  --rr-color-bg: hsl(210 60% 99%);
  /* --card = --white */
  --rr-color-surface: hsl(0 0% 100%);
  /* --foreground / --card-foreground = --gray-900 */
  --rr-color-fg: hsl(0 0% 10%);
  /* --muted-foreground */
  --rr-color-fg-muted: hsl(0 0% 55.6%);
  /* --gray-300 */
  --rr-color-fg-subtle: hsl(210 8% 68%);
  /* --border = --gray-100 */
  --rr-color-border: hsl(210 14% 89%);
  /* --gray-200 */
  --rr-color-border-strong: hsl(210 11% 78%);

  /* Optional muted surfaces (Kraken --muted / --accent) — parity for future UI */
  --rr-color-muted-bg: hsl(0 0% 96.1%);
  --rr-color-accent-surface: hsl(0 0% 96.1%);
  --rr-color-accent-surface-fg: hsl(0 0% 9%);

  /* Colour — accent (Kraken --primary / --blue-* / --blue-foreground) */
  --rr-color-accent: hsl(219 100% 37%);
  /* --blue-hover */
  --rr-color-accent-hover: hsl(219 100% 30%);
  /* --blue-dark (pressed / darker than hover) */
  --rr-color-accent-active: hsl(223 100% 17%);
  --rr-color-accent-fg: hsl(0 0% 100%);
  /* Tinted disable state (Kraken derives from opacity; approximate solid) */
  --rr-color-accent-disabled: hsl(219 60% 70%);

  /* Colour — destructive (Kraken --destructive* / destructive-dark for text tone) */
  --rr-color-error: hsl(0 100% 33%);
  --rr-color-error-bg: hsl(0 88% 94%);
  /* --destructive-dark */
  --rr-color-error-fg: hsl(0 100% 20%);
  --rr-color-error-hover: hsl(0 100% 26%);

  /* Radii
   * Kraken: --radius = base*2 (8px), --radius-xl = base*6 (24px).
   * Cards use radius-xl; alerts / solid buttons use radius; pills stay full. */
  --rr-radius-sm: var(--rr-base-unit);
  /* Kraken `<Email>` / `<BaseInput>`: subtle rounding (matches Storybook docs). */
  --rr-radius-input: var(--rr-radius-sm);
  --rr-radius-md: calc(var(--rr-base-unit) * 2);
  --rr-radius-alert: var(--rr-radius-md);
  --rr-radius-lg: calc(var(--rr-base-unit) * 6);
  --rr-radius-card: var(--rr-radius-lg);
  --rr-radius-pill: 9999px;

  /* Spacing (4px grid; aligns with Kraken Tailwind spacing) */
  --rr-space-1: var(--rr-base-unit);
  --rr-space-2: calc(var(--rr-base-unit) * 2);
  --rr-space-3: calc(var(--rr-base-unit) * 3);
  --rr-space-4: calc(var(--rr-base-unit) * 4);
  --rr-space-5: calc(var(--rr-base-unit) * 5);
  --rr-space-6: calc(var(--rr-base-unit) * 6);
  --rr-space-7: calc(var(--rr-base-unit) * 7);
  --rr-space-8: calc(var(--rr-base-unit) * 8);
  --rr-space-10: calc(var(--rr-base-unit) * 10);

  /* Typography (Kraken --font-display … --font-sm; `--rr-text-xs` is auth-only.) */
  --rr-text-display: clamp(1.602rem, 1.44rem + 0.63vw, 1.802rem);
  --rr-text-3xl: clamp(1.424rem, 1.28rem + 0.57vw, 1.602rem);
  --rr-text-2xl: clamp(1.266rem, 1.14rem + 0.5vw, 1.424rem);
  --rr-text-xl: clamp(1.125rem, 1.013rem + 0.44vw, 1.266rem);
  --rr-text-lg: clamp(1rem, 0.9rem + 0.39vw, 1.125rem);
  --rr-text-md: clamp(0.889rem, 0.79rem + 0.37vw, 1rem);
  --rr-text-sm: clamp(0.79rem, 0.71rem + 0.31vw, 0.889rem);
  /* Kraken has no `--font-xs`; sub-`sm` caption step for this surface only. */
  --rr-text-xs: clamp(0.703rem, 0.63rem + 0.27vw, 0.79rem);

  --rr-font-sans:
    'Open Sans', 'Noto Sans JP', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', sans-serif;

  /* --card = Kraken card bg */
  --rr-color-card: hsl(0 0% 100%);

  /* Elevation — Kraken Card shadow-sm */
  --rr-shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  /* Card width */
  --rr-card-max-width: 380px;

  /* Settings card width */
  --rr-settings-max-width: 960px;

  /* Identifier-step sign-in form — reserves space so the card does not resize while loading. */
  --rr-card-content-min-height: calc(
    var(--rr-space-4) + var(--rr-text-2xl) * 1.3 + var(--rr-text-sm) * 1.25 + var(--rr-space-1) +
      40px + var(--rr-space-1) + var(--rr-space-4) + 40px + var(--rr-space-4)
  );

  --rr-logo-width: 112px;
  --rr-logo-height: auto;
}