/* -------------------------------------
   GOTWEE - Semantic Tokens
   Maps core tokens to UI intent
   Modes: Light / Dark
------------------------------------- */

/* Default mode = Light */
:root {
  --bg-color: var(--color-neutral-50);
  --bg-alt: var(--color-neutral-100);
  --trust-logo-bg: var(--color-neutral-200);
  --logo-color: var(--color-basic-black);
  --text-primary: var(--color-neutral-1000);
  --text-dim: var(--color-neutral-700);
  --text-muted: var(--color-neutral-600);
  --color-subtitle: var(--color-neutral-500);

  --primary-color: var(--color-brand-primary-500);
  --primary-hover: var(--color-brand-primary-600);
  --color-accent: var(--color-brand-primary-400);

  --border-color: var(--color-neutral-200);
  --border-highlight: rgba(100, 120, 107, 0.3);

  --color-white: #ffffff;
  --color-black: #000000;
  --color-grid-line: rgba(57, 62, 70, 0.14);
  --color-primary-alpha-10: rgba(100, 120, 107, 0.1);
  --header-bg: rgba(219, 221, 225, 0.8);
  --row-hover-bg: rgba(57, 62, 70, 0.06);
  --glow-white: rgba(255, 255, 255, 0.5);
  --glow-primary: rgba(100, 120, 107, 0.6);
  --shadow-panel: 0 20px 50px rgba(0, 0, 0, 0.5);

  --font-main: 'Futura', 'Trebuchet MS', Arial, sans-serif;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --container-width: 1300px;
  --header-height: 80px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.6s;

  /* button component */
  --button-gap: var(--spacing-75);
  --button-padding-y: var(--spacing-150);
  --button-padding-x: var(--spacing-200);
  --button-padding-y-sm: var(--spacing-100);
  --button-padding-x-sm: var(--spacing-150);
  --button-radius: var(--radius-100);
  --button-font-size: 16px;
  --button-font-size-sm: 14px;
  --button-font-weight: 500;
  --button-line-height: 1;
  --button-border-width: 1px;
  --button-transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), opacity 160ms var(--ease-out);

  --button-primary-bg-default: #64786b;
  --button-primary-border-default: #64786b;
  --button-primary-text-default: #ffffff;
  --button-primary-bg-hover: #8a9e91;
  --button-primary-border-hover: #8a9e91;
  --button-primary-text-hover: #ffffff;
  --button-primary-bg-active: #a0b0a6;
  --button-primary-border-active: #a0b0a6;
  --button-primary-text-active: #ffffff;
  --button-primary-bg-focused: #64786b;
  --button-primary-border-focused: #cdd6d0;
  --button-primary-text-focused: #ffffff;
  --button-primary-bg-disabled: #2e3831;
  --button-primary-border-disabled: #2e3831;
  --button-primary-text-disabled: #535964;

  --button-secondary-bg-default: #0d0d0e;
  --button-secondary-border-default: #454a54;
  --button-secondary-text-default: #ffffff;
  --button-secondary-bg-hover: #0d0d0e;
  --button-secondary-border-hover: #cdd6d0;
  --button-secondary-text-hover: #ffffff;
  --button-secondary-bg-active: #2e3138;
  --button-secondary-border-active: #cdd6d0;
  --button-secondary-text-active: #ffffff;
  --button-secondary-bg-focused: #0d0d0e;
  --button-secondary-border-focused: #a0b0a6;
  --button-secondary-text-focused: #ffffff;
  --button-secondary-bg-disabled: #0d0d0e;
  --button-secondary-border-disabled: #454a54;
  --button-secondary-text-disabled: #454a54;
}

/* Dark mode */
body.theme-dark {
  --bg-color: #0d0d0f;
  --bg-alt: #131316;
  --trust-logo-bg: var(--color-neutral-200);
  --logo-color: var(--color-basic-white);
  --text-primary: #ededed;
  --text-dim: #9999a1;
  --text-muted: #5c5c63;
  --color-subtitle: #6b7280;

  --primary-color: var(--color-brand-primary-500);
  --primary-hover: var(--color-brand-primary-600);
  --color-accent: var(--color-brand-primary-400);

  --border-color: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(100, 120, 107, 0.3);

  --color-grid-line: #222a2550;
  --color-primary-alpha-10: rgba(100, 120, 107, 0.1);
  --header-bg: rgba(13, 13, 15, 0.8);
  --row-hover-bg: rgba(255, 255, 255, 0.02);
  --glow-white: rgba(255, 255, 255, 0.5);
  --glow-primary: rgba(100, 120, 107, 0.6);
  --shadow-panel: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* button component */
  --button-gap: var(--spacing-75);
  --button-padding-y: var(--spacing-150);
  --button-padding-x: var(--spacing-200);
  --button-padding-y-sm: var(--spacing-100);
  --button-padding-x-sm: var(--spacing-150);
  --button-radius: var(--radius-100);
  --button-font-size: 16px;
  --button-font-size-sm: 14px;
  --button-font-weight: 500;
  --button-line-height: 1;
  --button-border-width: 1px;
  --button-transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), opacity 160ms var(--ease-out);

  --button-primary-bg-default: #64786b;
  --button-primary-border-default: #64786b;
  --button-primary-text-default: #ffffff;
  --button-primary-bg-hover: #8a9e91;
  --button-primary-border-hover: #8a9e91;
  --button-primary-text-hover: #ffffff;
  --button-primary-bg-active: #a0b0a6;
  --button-primary-border-active: #a0b0a6;
  --button-primary-text-active: #ffffff;
  --button-primary-bg-focused: #64786b;
  --button-primary-border-focused: #cdd6d0;
  --button-primary-text-focused: #ffffff;
  --button-primary-bg-disabled: #2e3831;
  --button-primary-border-disabled: #2e3831;
  --button-primary-text-disabled: #535964;

  --button-secondary-bg-default: #0d0d0e;
  --button-secondary-border-default: #454a54;
  --button-secondary-text-default: #ffffff;
  --button-secondary-bg-hover: #0d0d0e;
  --button-secondary-border-hover: #cdd6d0;
  --button-secondary-text-hover: #ffffff;
  --button-secondary-bg-active: #2e3138;
  --button-secondary-border-active: #cdd6d0;
  --button-secondary-text-active: #ffffff;
  --button-secondary-bg-focused: #0d0d0e;
  --button-secondary-border-focused: #a0b0a6;
  --button-secondary-text-focused: #ffffff;
  --button-secondary-bg-disabled: #0d0d0e;
  --button-secondary-border-disabled: #454a54;
  --button-secondary-text-disabled: #454a54;
}