/**
 * Appeal Hub design tokens — CSS custom properties
 * Source: styles/tokens/primitives.tokens.json + semantic.tokens.json
 * Theme: light only
 * Sync: manual (see docs/design-tokens.md)
 */

:root {
  /* ─── Primitive: color ─── */
  --color-white: #FFFFFF;
  --color-black-hard: #141414;
  --color-black: #1F1F1F;
  --color-black-soft: #292929;
  --color-grey-jet: #2C2C2C;
  --color-grey-dark: #414141;
  --color-grey: #959596;
  --color-grey-light: #D9D9D9;
  --color-grey-soft: #F4F4F4;
  --color-cooper-dark: #AC400F;
  --color-cooper-light: #DD7921;
  --color-copper: #E84E0E;
  --color-copper-light: #FF8A1E;
  --color-copper-fill: #C65E18;
  --color-tabbar-dark: #262626;
  --color-tabbar-darker: #1C1C1C;
  --color-text-muted-on-white: #6F6F70;
  --color-error: #E64242;
  --color-success: #147546;
  --color-info: #0062A8;
  --color-white-64: rgba(255, 255, 255, 0.64);

  /* ─── Semantic: brand & accent ─── */
  --color-brand-primary: var(--color-copper);
  --color-brand-primary-hover: var(--color-copper-light);
  --color-brand-primary-fill: var(--color-copper-fill);
  --color-brand-secondary: var(--color-cooper-dark);
  --color-accent-default: var(--color-copper);

  /* ─── Semantic: background ─── */
  --color-background-page: var(--color-white);
  --color-background-surface: var(--color-white);
  --color-background-surface-muted: var(--color-grey-soft);
  --color-background-inverse: var(--color-black);
  --color-background-tabbar: var(--color-tabbar-dark);

  /* ─── Semantic: text ─── */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-text-muted-on-white);
  --color-text-muted: var(--color-grey);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: var(--color-white-64);
  --color-text-accent: var(--color-copper);
  --color-text-link: var(--color-info);

  /* ─── Semantic: icon ─── */
  --color-icon-primary: var(--color-black);
  --color-icon-secondary: var(--color-grey);
  --color-icon-inverse: var(--color-white);
  --color-icon-accent: var(--color-copper);

  /* ─── Semantic: border & divider ─── */
  --color-border-default: var(--color-grey-light);
  --color-border-subtle: var(--color-grey-soft);
  --color-border-strong: var(--color-grey-dark);
  --color-divider-default: var(--color-grey-light);

  /* ─── Semantic: interactive ─── */
  --color-action-primary: var(--color-copper);
  --color-action-primary-hover: var(--color-copper-light);
  --color-action-secondary: var(--color-black);
  --color-action-secondary-hover: var(--color-black-soft);

  /* ─── Semantic: focus & disabled ─── */
  --color-focus-ring: var(--color-info); /* unconfirmed — see design-tokens.md */
  --color-disabled-background: var(--color-grey-soft);
  --color-disabled-text: var(--color-grey);
  --opacity-disabled-on-inverse: 0.64;

  /* ─── Semantic: status ─── */
  --color-status-success: var(--color-success);
  --color-status-danger: var(--color-error);
  --color-status-info: var(--color-info);

  /* ─── Primitive: spacing ─── */
  --spacing-0: 0px;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 12px;
  --spacing-5: 16px;
  --spacing-6: 20px;
  --spacing-7: 24px;
  --spacing-8: 32px;
  --spacing-9: 40px;
  --spacing-10: 48px;
  --spacing-11: 56px;
  --spacing-12: 64px;
  --spacing-13: 72px;
  --spacing-14: 80px;
  --spacing-15: 88px;

  /* ─── Semantic: spacing ─── */
  --spacing-inline-xs: var(--spacing-2);
  --spacing-inline-sm: var(--spacing-3);
  --spacing-inline-md: var(--spacing-5);
  --spacing-inline-lg: var(--spacing-7);
  --spacing-stack-xs: var(--spacing-2);
  --spacing-stack-sm: var(--spacing-4);
  --spacing-stack-md: var(--spacing-5);
  --spacing-stack-lg: var(--spacing-7);
  --spacing-stack-xl: var(--spacing-8);
  --spacing-page: var(--spacing-8);
  --spacing-section: var(--spacing-10);

  /* ─── Primitive: radius ─── */
  --radius-control-sm: 8px;
  --radius-control-md: 12px;
  --radius-element-sm: 16px;
  --radius-element-md: 20px;
  --radius-element-lg: 24px;
  --radius-section: 32px;
  --radius-full: 9999px; /* unconfirmed — pill shape */

  /* ─── Semantic: radius ─── */
  --radius-control: var(--radius-control-sm);
  --radius-control-lg: var(--radius-control-md);
  --radius-surface: var(--radius-element-sm);
  --radius-surface-lg: var(--radius-element-lg);
  --radius-section-outer: var(--radius-section);
  --radius-pill: var(--radius-full);

  /* ─── Shadow ─── */
  --shadow-elevation-sm: 0px 4px 14.8px 0px rgba(0, 0, 0, 0.55);
  --shadow-button-primary-inner-light: inset 1px 1px 2px 0 rgba(255, 255, 255, 0.31);
  --shadow-button-primary-inner-dark: inset -1px -1px 2px 0 rgba(33, 41, 48, 0.42);
  --shadow-button-primary: var(--shadow-button-primary-inner-light), var(--shadow-button-primary-inner-dark);

  /* ─── Typography: font family ─── */
  --font-family-primary: "TT Firs Text Trial Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ─── Typography: heading (desktop defaults) ─── */
  --font-size-heading-xl: 56px;
  --font-weight-heading-xl: 500;
  --line-height-heading-xl: 56px;

  --font-size-heading-lg: 36px;
  --font-weight-heading-lg: 500;
  --line-height-heading-lg: 40px;

  --font-size-heading-md: 28px;
  --font-weight-heading-md: 500;
  --line-height-heading-md: 36px;

  --font-size-heading-sm: 24px;
  --font-weight-heading-sm: 500;
  --line-height-heading-sm: 30px;

  --font-size-heading-xs: 18px;
  --font-weight-heading-xs: 500;
  --line-height-heading-xs: 24px;

  /* ─── Typography: body ─── */
  --font-size-body-xl: 36px;
  --font-weight-body-xl: 450;
  --line-height-body-xl: 48px;

  --font-size-body-lg: 22px;
  --font-weight-body-lg: 450;
  --line-height-body-lg: 32px;

  --font-size-body-md: 15px;
  --font-weight-body-md: 450;
  --line-height-body-md: 22px;

  --font-size-body-sm: 16px;
  --font-weight-body-sm: 450;
  --line-height-body-sm: 1.36;

  /* ─── Typography: label & caption ─── */
  --font-size-label-md: 15px;
  --font-weight-label-md: 450;
  --line-height-label-md: 22px;

  --font-size-label-sm: 16px;
  --font-weight-label-sm: 450;
  --line-height-label-sm: 1.36;

  --font-size-caption: 15px;
  --font-weight-caption: 450;
  --line-height-caption: 22px;

  --letter-spacing-default: 0;

  /* ─── Control heights ─── */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
}