/**
 * Gurudada site theme tokens
 * Mirrors grdd-app/lib/res/theme.dart (Poppins + Material-like type scale)
 * Use these CSS variables when aligning new pages with the mobile app.
 */

:root {
  /* —— Font family (same as GoogleFonts.poppins in theme.dart) —— */
  --gd-font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* —— Type scale (font-size / line-height / letter-spacing / weight) —— */
  --gd-display-large-size: 57px;
  --gd-display-large-lh: calc(64 / 57);
  --gd-display-large-ls: -0.25px;

  --gd-display-medium-size: 45px;
  --gd-display-medium-lh: calc(52 / 45);

  --gd-display-small-size: 34px;
  --gd-display-small-lh: calc(44 / 36);
  --gd-display-small-weight: 500;

  --gd-headline-large-size: 32px;
  --gd-headline-large-lh: calc(40 / 32);

  --gd-headline-medium-size: 28px;
  --gd-headline-medium-lh: calc(36 / 28);
  --gd-headline-medium-weight: 500;

  --gd-headline-small-size: 24px;
  --gd-headline-small-lh: calc(32 / 24);

  --gd-title-large-size: 22px;
  --gd-title-large-lh: calc(28 / 22);
  --gd-title-large-weight: 500;

  --gd-title-medium-size: 16px;
  --gd-title-medium-lh: calc(24 / 16);
  --gd-title-medium-ls: 0.15px;
  --gd-title-medium-weight: 500;

  --gd-title-small-size: 14px;
  --gd-title-small-lh: calc(20 / 14);
  --gd-title-small-ls: 0.1px;
  --gd-title-small-weight: 500;

  --gd-body-large-size: 16px;
  --gd-body-large-lh: calc(24 / 16);
  --gd-body-large-ls: 0.5px;

  --gd-body-medium-size: 14px;
  --gd-body-medium-lh: calc(20 / 14);
  --gd-body-medium-ls: 0.25px;

  --gd-body-small-size: 12px;
  --gd-body-small-lh: calc(16 / 12);
  --gd-body-small-ls: 0.4px;

  --gd-label-large-size: 14px;
  --gd-label-large-lh: calc(20 / 14);
  --gd-label-large-ls: 0.1px;
  --gd-label-large-weight: 500;

  --gd-label-medium-size: 12px;
  --gd-label-medium-lh: calc(16 / 12);
  --gd-label-medium-ls: 0.5px;
  --gd-label-medium-weight: 500;

  --gd-label-small-size: 9.5px;
  --gd-label-small-lh: calc(16 / 11);
  --gd-label-small-ls: 0.5px;
  --gd-label-small-weight: 500;

  /* —— Light ColorScheme (theme.dart _light) —— */
  --gd-primary: #181c20;
  --gd-on-primary: #f5f7fd;
  --gd-primary-container: #dedede;
  --gd-on-primary-container: #4b4b4b;

  --gd-secondary: #ccc2dc;
  --gd-on-secondary: #332d41;
  --gd-secondary-container: #4b4b4b;
  --gd-on-secondary-container: #dedede;

  --gd-tertiary: #dedede;
  --gd-on-tertiary: #6c2624;
  --gd-tertiary-container: #6c2624;
  --gd-on-tertiary-container: #ffffff;

  --gd-error: #dc362e;
  --gd-on-error: #ffffff;

  --gd-surface: #f5f7fd;
  --gd-surface-bright: #f5f7fd;
  --gd-surface-dim: #dedede;
  --gd-on-surface: #4b4b4b;
  --gd-surface-container: #eceef4;
  --gd-surface-container-high: #e6e8ee;
  --gd-surface-container-highest: #e6e0e9;

  /* —— Convenience aliases —— */
  --gd-accent: #6c2624;
  --gd-muted: #4b4b4b;
  --gd-line: rgba(75, 75, 75, 0.18);
}

/* Optional utility classes for new pages */
.gd-font {
  font-family: var(--gd-font-family);
}

.gd-body-small {
  font-family: var(--gd-font-family);
  font-size: var(--gd-body-small-size);
  line-height: var(--gd-body-small-lh);
  letter-spacing: var(--gd-body-small-ls);
}

.gd-label-small {
  font-family: var(--gd-font-family);
  font-size: var(--gd-label-small-size);
  line-height: var(--gd-label-small-lh);
  letter-spacing: var(--gd-label-small-ls);
  font-weight: var(--gd-label-small-weight);
}