/*
 * Table Tribe design tokens
 *
 * Design language
 * - Warm and editorial: cream canvases, ivory surfaces, forest actions, and
 *   restrained gold accents.
 * - Typography pairs Cormorant Garamond for expressive display copy with Jost
 *   for clear interface copy.
 * - Layout follows a 4px rhythm. Corners are deliberately sharp or fully
 *   rounded; avoid unlisted intermediate radii.
 * - Gold and bright terracotta are decorative. Use their deeper variants for
 *   text, focus, error, and other small functional details.
 * - Never communicate status with color alone. Pair it with text or an icon.
 *
 * This is a light-only system. Add another color scheme only after an approved
 * design change. CSS pixels intentionally map to Flutter logical pixels.
 */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  color-scheme: light;

  /* Brand palette: use semantic aliases in component styles. */
  --tt-color-forest: #1f3d30;
  --tt-color-cream: #f6f0e5;
  --tt-color-gold: #a78947;
  --tt-color-forest-mid: #2d6a4f;
  --tt-color-moss: #40916c;
  --tt-color-sage: #d8f3dc;
  --tt-color-ivory: #fbf8f2;
  --tt-color-ink: #1a1a18;
  --tt-color-muted: #6b6b5f;
  --tt-color-gold-deep: #7a6132;
  --tt-color-terracotta: #e07a5f;
  --tt-color-terracotta-deep: #a2492f;
  --tt-color-error-surface: #f3e5de;
  --tt-color-gold-surface: #efe7d3;
  --tt-color-forest-12: rgb(31 61 48 / 12%);
  --tt-color-forest-70: rgb(31 61 48 / 70%);

  /* Material color roles and application surfaces. */
  --tt-color-primary: var(--tt-color-forest);
  --tt-color-on-primary: var(--tt-color-cream);
  --tt-color-secondary: var(--tt-color-gold-deep);
  --tt-color-on-secondary: var(--tt-color-cream);
  --tt-color-tertiary: var(--tt-color-gold);
  --tt-color-on-tertiary: var(--tt-color-forest);
  --tt-color-error: var(--tt-color-terracotta-deep);
  --tt-color-on-error: var(--tt-color-cream);
  --tt-color-canvas: var(--tt-color-cream);
  --tt-color-surface: var(--tt-color-ivory);
  --tt-color-surface-container-highest: var(--tt-color-cream);
  --tt-color-on-surface: var(--tt-color-ink);

  /* Content, state, and border roles. */
  --tt-color-text-primary: var(--tt-color-ink);
  --tt-color-text-secondary: var(--tt-color-muted);
  --tt-color-text-accent: var(--tt-color-gold-deep);
  --tt-color-text-on-filled: var(--tt-color-cream);
  --tt-color-success: var(--tt-color-forest-mid);
  --tt-color-success-accent: var(--tt-color-moss);
  --tt-color-success-surface: var(--tt-color-sage);
  --tt-color-info: var(--tt-color-gold-deep);
  --tt-color-info-accent: var(--tt-color-gold);
  --tt-color-info-surface: var(--tt-color-gold-surface);
  --tt-color-danger: var(--tt-color-terracotta-deep);
  --tt-color-danger-accent: var(--tt-color-terracotta);
  --tt-color-danger-surface: var(--tt-color-error-surface);
  --tt-color-border-subtle: var(--tt-color-forest-12);
  --tt-color-border-input: var(--tt-color-forest-70);
  --tt-color-border-focus: var(--tt-color-gold-deep);
  --tt-color-border-error: var(--tt-color-terracotta-deep);

  /* Font families. The corresponding web font files must be loaded by the app. */
  --tt-font-family-display:
    "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tt-font-family-interface:
    "Jost", "Avenir Next", Avenir, Montserrat, sans-serif;
  --tt-font-weight-regular: 400;
  --tt-font-weight-medium: 500;
  --tt-font-weight-semibold: 600;

  /* Display: hero and marketing copy. */
  --tt-text-display-family: var(--tt-font-family-display);
  --tt-text-display-size: 40px;
  --tt-text-display-line-height: 48px;
  --tt-text-display-weight: var(--tt-font-weight-medium);
  --tt-text-display-letter-spacing: -0.8px;

  /* Headline: screen titles. */
  --tt-text-headline-family: var(--tt-font-family-display);
  --tt-text-headline-size: 32px;
  --tt-text-headline-line-height: 40px;
  --tt-text-headline-weight: var(--tt-font-weight-medium);
  --tt-text-headline-letter-spacing: -0.64px;

  /* Headline small: sections and app-bar titles. */
  --tt-text-headline-small-family: var(--tt-font-family-display);
  --tt-text-headline-small-size: 24px;
  --tt-text-headline-small-line-height: 32px;
  --tt-text-headline-small-weight: var(--tt-font-weight-medium);
  --tt-text-headline-small-letter-spacing: normal;

  /* Title serif: cards and dialogs. */
  --tt-text-title-serif-family: var(--tt-font-family-display);
  --tt-text-title-serif-size: 22px;
  --tt-text-title-serif-line-height: 28px;
  --tt-text-title-serif-weight: var(--tt-font-weight-medium);
  --tt-text-title-serif-letter-spacing: normal;

  /* Quote: editorial pull quotes. */
  --tt-text-quote-family: var(--tt-font-family-display);
  --tt-text-quote-size: 20px;
  --tt-text-quote-line-height: 28px;
  --tt-text-quote-weight: var(--tt-font-weight-regular);
  --tt-text-quote-style: italic;
  --tt-text-quote-color: var(--tt-color-primary);

  /* Title medium and small: sans-serif interface headings. */
  --tt-text-title-medium-family: var(--tt-font-family-interface);
  --tt-text-title-medium-size: 16px;
  --tt-text-title-medium-line-height: 24px;
  --tt-text-title-medium-weight: var(--tt-font-weight-medium);
  --tt-text-title-small-family: var(--tt-font-family-interface);
  --tt-text-title-small-size: 14px;
  --tt-text-title-small-line-height: 20px;
  --tt-text-title-small-weight: var(--tt-font-weight-medium);

  /* Body text. */
  --tt-text-body-large-family: var(--tt-font-family-interface);
  --tt-text-body-large-size: 16px;
  --tt-text-body-large-line-height: 24px;
  --tt-text-body-large-weight: var(--tt-font-weight-regular);
  --tt-text-body-family: var(--tt-font-family-interface);
  --tt-text-body-size: 14px;
  --tt-text-body-line-height: 20px;
  --tt-text-body-weight: var(--tt-font-weight-regular);
  --tt-text-body-small-family: var(--tt-font-family-interface);
  --tt-text-body-small-size: 12px;
  --tt-text-body-small-line-height: 16px;
  --tt-text-body-small-weight: var(--tt-font-weight-regular);

  /*
   * Labels and eyebrows are transformed by the component. Keep source copy in
   * its natural case for accessibility and reuse.
   */
  --tt-text-label-family: var(--tt-font-family-interface);
  --tt-text-label-size: 14px;
  --tt-text-label-line-height: 16px;
  --tt-text-label-weight: var(--tt-font-weight-medium);
  --tt-text-label-letter-spacing: 1.4px;
  --tt-text-label-transform: uppercase;
  --tt-text-label-medium-family: var(--tt-font-family-interface);
  --tt-text-label-medium-size: 12px;
  --tt-text-label-medium-line-height: 16px;
  --tt-text-label-medium-weight: var(--tt-font-weight-medium);
  --tt-text-label-medium-letter-spacing: 1.2px;
  --tt-text-eyebrow-family: var(--tt-font-family-interface);
  --tt-text-eyebrow-size: 11px;
  --tt-text-eyebrow-line-height: 16px;
  --tt-text-eyebrow-weight: var(--tt-font-weight-medium);
  --tt-text-eyebrow-letter-spacing: 2.2px;
  --tt-text-eyebrow-transform: uppercase;
  --tt-text-caption-family: var(--tt-font-family-interface);
  --tt-text-caption-size: 12px;
  --tt-text-caption-line-height: 16px;
  --tt-text-caption-weight: var(--tt-font-weight-regular);
  --tt-text-caption-color: var(--tt-color-text-secondary);

  /* Spacing: 4px base rhythm. Do not introduce arbitrary values. */
  --tt-space-xxs: 4px;
  --tt-space-xs: 8px;
  --tt-space-sm: 12px;
  --tt-space-md: 16px;
  --tt-space-lg: 24px;
  --tt-space-xl: 32px;
  --tt-space-xxl: 48px;

  /* Shape: the brand uses sharp corners and full rounds, not medium radii. */
  --tt-radius-sharp: 2px;
  --tt-radius-soft: 4px;
  --tt-radius-pill: 999px;

  /* Borders and elevation. */
  --tt-border-width-default: 1px;
  --tt-border-width-focus: 2px;
  --tt-shadow-none: none;

  /* Icon and interaction sizing. */
  --tt-icon-size-sm: 20px;
  --tt-icon-size-md: 24px;
  --tt-icon-size-lg: 32px;
  --tt-size-touch-target-min: 48px;

  /* Motion. */
  --tt-motion-duration-fast: 150ms;
  --tt-motion-duration-normal: 250ms;
  --tt-motion-duration-slow: 400ms;
  --tt-motion-easing-enter: cubic-bezier(0.215, 0.61, 0.355, 1);
  --tt-motion-easing-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);

  /* Component contracts derived from the Flutter ThemeData. */
  --tt-app-bar-background: var(--tt-color-canvas);
  --tt-app-bar-foreground: var(--tt-color-text-primary);
  --tt-app-bar-shadow: var(--tt-shadow-none);
  --tt-divider-color: var(--tt-color-border-subtle);
  --tt-divider-width: var(--tt-border-width-default);
  --tt-progress-color: var(--tt-color-primary);
  --tt-snackbar-background: var(--tt-color-primary);
  --tt-snackbar-foreground: var(--tt-color-on-primary);
  --tt-snackbar-radius: var(--tt-radius-sharp);
  --tt-dialog-background: var(--tt-color-surface);
  --tt-dialog-radius: var(--tt-radius-sharp);
  --tt-bottom-sheet-background: var(--tt-color-surface);
  --tt-bottom-sheet-radius: var(--tt-radius-soft);
  --tt-input-background: var(--tt-color-surface);
  --tt-input-foreground: var(--tt-color-text-primary);
  --tt-input-placeholder: var(--tt-color-text-secondary);
  --tt-input-label: var(--tt-color-text-secondary);
  --tt-input-label-focus: var(--tt-color-primary);
  --tt-input-error: var(--tt-color-danger);
  --tt-input-border: var(--tt-color-border-input);
  --tt-input-border-focus: var(--tt-color-border-focus);
  --tt-input-border-error: var(--tt-color-border-error);
  --tt-input-border-width: var(--tt-border-width-default);
  --tt-input-border-width-focus: var(--tt-border-width-focus);
  --tt-input-radius: var(--tt-radius-sharp);
  --tt-input-padding-inline: var(--tt-space-md);
  --tt-input-padding-block: var(--tt-space-sm);
}

/* Components with continuous animation must also explicitly stop it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tt-motion-duration-fast: 0ms;
    --tt-motion-duration-normal: 0ms;
    --tt-motion-duration-slow: 0ms;
  }
}