/**
 * Branding design tokens — single source of truth for typography and derived color tokens.
 *
 * Theme scaling: add a new theme by setting only 6 vars in branding_themes.css:
 *   --color-text, --color-bg, --color-primary, --color-secondary, --color-accent, --base-color
 *
 * All component tokens (buttons, fields, cards, etc.) are derived from these.
 */

/* =========================================
   Typography – Primitive Tokens
   ========================================= */

:root {
  --font-family-base: "Inter", sans-serif;

  /* Base configuration */
  --base-font-size: 16px;
  --scale-ratio: 1.2;
  --line-height-ratio: 1.4;

  /* Font weights */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;

  /* Heading scale */
  --h1-size: 3rem;
  --h1-line: 4.19rem;
  --h1-letter-spacing: -0.8px;

  --h2-size: 2.06rem;
  --h2-line: 2.88rem;
  --h2-letter-spacing: -0.8px;

  --h3-size: 1.75rem;
  --h3-line: 2.44rem;
  --h3-letter-spacing: -0.4px;

  --h4-size: 1.44rem;
  --h4-line: 2rem;
  --h4-letter-spacing: -0.4px;

  --h5-size: 1.19rem;
  --h5-line: 1.69rem;
  --h5-letter-spacing: -0.2px;

  --h6-size: 1rem;
  --h6-line: 1.38rem;
  --h6-letter-spacing: -0.2px;

  /* Text scale */
  --text-base-size: 1rem;
  --text-base-line: 1.38rem;
  --text-base-letter-spacing: -0.2px;

  --text-sm-size: 0.81rem;
  --text-sm-line: 1.13rem;
  --text-sm-letter-spacing: -0.2px;

  --text-xs-size: 0.69rem;
  --text-xs-line: 0.94rem;
  --text-xs-letter-spacing: -0.2px;

  /* Component-specific mapping */
  --button-text-size: var(--text-sm-size);
  --button-text-line: var(--text-sm-line);
  --input-text-size: var(--text-sm-size);
  --input-text-line: var(--text-sm-line);
}

/* Utility: Powered-by content should follow theme primary */
.powered-by-content {
  color: var(--color-primary);
}

/* =========================================
   Derived tokens — applied wherever canonical vars are set
   (branding theme roots or .theme-default inside them)
   ========================================= */

[class*="branding-pricing-theme-"] .theme-default,
[class*="branding-login-theme-"],
[class*="branding-email-theme-"].email-preview-theme {
  /* Text tokens */
  --text-default: var(--color-text);
  --text-muted: color-mix(in srgb, var(--color-text) 60%, transparent);

  /* Buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: var(--base-color);
  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-text: var(--color-text);
  --btn-primary-bg-hover: color-mix(in srgb, var(--color-primary) 90%, transparent);
  --btn-primary-bg-active: color-mix(in srgb, var(--color-primary) 80%, transparent);
  --btn-secondary-bg-hover: color-mix(in srgb, var(--color-secondary) 85%, transparent);
  --btn-secondary-bg-active: color-mix(in srgb, var(--color-secondary) 75%, transparent);

  /* Fields */
  --field-bg: var(--base-color);
  --field-border: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --field-border-focus: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --field-placeholder: color-mix(in srgb, var(--color-text) 25%, transparent);
  --field-icon: color-mix(in srgb, var(--color-primary) 50%, transparent);
  --field-value: var(--color-text);

  /* Switch / segmented control */
  --switch-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --switch-text-inactive: color-mix(in srgb, var(--color-primary) 50%, transparent);
  --switch-pill-bg: var(--color-primary);
  --switch-pill-text: var(--base-color);

  /* Cards */
  --login-card-bg: color-mix(in srgb, var(--color-secondary) 20%, var(--base-color));
  --login-card-border: color-mix(in srgb, var(--color-secondary) 70%, transparent);
  --card-bg: var(--base-color);
  --card-border: color-mix(in srgb, var(--color-secondary) 70%, transparent);
  --highlight-card-bg: var(--color-secondary);

  /* Misc */
  --shadow-card: 0 4px 12px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --divider-muted: color-mix(in srgb, var(--color-text) 15%, transparent);

  /* Theme-facing vars (consumed by plan preview structure) */
  --theme-primary: var(--color-primary);
  --theme-secondary: var(--color-secondary);
  --theme-bg: var(--color-bg);
  --theme-surface: var(--base-color);
  --theme-text: var(--color-text);
}