/**
 * EliteSingles Design Tokens
 */

:root {
  /* Brand identifier */
  --brand: elitesingles;

  /* Primary Colors - Burgundy/Maroon */
  --colors-primary-100: #e6cfd9;
  --colors-primary-200: #d3a3b8;
  --colors-primary-300: #ad7088;
  --colors-primary-400: #763d53;
  --colors-primary-500: #61233a;
  --colors-primary-600: #4a172b;
  --colors-primary-700: #381122;
  --colors-primary-800: #260c18;
  --colors-primary-900: #14060d;

  /* Secondary Colors - Warm Orange/Gold */
  --colors-secondary-100: #fff7e3;
  --colors-secondary-200: #fbdcae;
  --colors-secondary-300: #f3b67d;
  --colors-secondary-400: #e69760;
  --colors-secondary-500: #de8749;
  --colors-secondary-600: #d67d40;
  --colors-secondary-700: #a45a26;
  --colors-secondary-800: #733b13;
  --colors-secondary-900: #5e2d09;

  /* Neutral Colors */
  --colors-neutral-50: #f7f3eb;
  --colors-neutral-100: #ece8e0;
  --colors-neutral-200: #dcd8d1;
  --colors-neutral-300: #c1beb7;
  --colors-neutral-400: #9c9a94;
  --colors-neutral-500: #74726e;
  --colors-neutral-600: #4f4e4b;
  --colors-neutral-700: #353432;
  --colors-neutral-800: #252423;
  --colors-neutral-900: #1f1e1d;

  /* White with opacity */
  --colors-white-50: rgba(255, 255, 255, 0.05);
  --colors-white-100: rgba(255, 255, 255, 0.1);
  --colors-white-200: rgba(255, 255, 255, 0.2);
  --colors-white-300: rgba(255, 255, 255, 0.3);
  --colors-white-400: rgba(255, 255, 255, 0.4);
  --colors-white-500: rgba(255, 255, 255, 0.5);
  --colors-white-600: rgba(255, 255, 255, 0.6);
  --colors-white-700: rgba(255, 255, 255, 0.7);
  --colors-white-800: rgba(255, 255, 255, 0.8);
  --colors-white-900: rgba(255, 255, 255, 0.9);
  --colors-white-000: #ffffff;
  --colors-cream-white: #fff7e6;

  /* Black with opacity */
  --colors-black-50: rgba(31, 31, 36, 0.05);
  --colors-black-100: rgba(31, 31, 36, 0.1);
  --colors-black-200: rgba(31, 31, 36, 0.2);
  --colors-black-300: rgba(31, 31, 36, 0.3);
  --colors-black-400: rgba(31, 31, 36, 0.4);
  --colors-black-500: rgba(31, 31, 36, 0.5);
  --colors-black-600: rgba(31, 31, 36, 0.6);
  --colors-black-700: rgba(31, 31, 36, 0.7);
  --colors-black-800: rgba(31, 31, 36, 0.8);
  --colors-black-900: rgba(31, 31, 36, 0.9);
  --colors-black-000: #1f1f24;

  /* Feedback Colors */
  --colors-error-100: #ffe5ec;
  --colors-error-400: #f76489;
  --colors-error-500: #f53d6b;
  --colors-error-700: #d50b3e;
  --colors-warning-400: #ffce5c;
  --colors-warning-500: #ffc233;
  --colors-warning-700: #c28800;
  --colors-success-400: #56d990;
  --colors-success-500: #2dca72;
  --colors-success-700: #1e874c;
  --colors-info-400: #38beff;
  --colors-info-500: #00acff;
  --colors-info-700: #0075ad;

  /* Logo Colors */
  --colors-logo-reverse: #fff7e6;
  --colors-logo-splash: #fff7e6;

  /* Social Colors */
  --colors-socials-facebook: #1a77f2;
  --colors-socials-google: #ffffff;
  --colors-socials-apple: #ffffff;

  /* Action Primary */
  --color-action-primary-surface-default: var(--colors-primary-500);
  --color-action-primary-surface-hover: var(--colors-primary-700);
  --color-action-primary-surface-disabled: var(--colors-primary-300);
  --color-action-primary-content-default: var(--colors-white-000);
  --color-action-primary-content-hover: var(--colors-white-800);
  --color-action-primary-content-disabled: var(--colors-white-500);

  /* Action Secondary */
  --color-action-secondary-surface-default: var(--colors-secondary-100);
  --color-action-secondary-surface-hover: var(--colors-secondary-200);
  --color-action-secondary-surface-disabled: var(--colors-secondary-100);
  --color-action-secondary-content-default: var(--colors-secondary-700);
  --color-action-secondary-content-hover: var(--colors-secondary-600);
  --color-action-secondary-content-disabled: var(--colors-secondary-400);

  /* Action Neutral */
  --color-action-neutral-surface-default: var(--colors-white-000);
  --color-action-neutral-surface-hover: var(--colors-neutral-200);
  --color-action-neutral-surface-disabled: var(--colors-neutral-200);
  --color-action-neutral-content-default: var(--colors-neutral-900);
  --color-action-neutral-content-hover: var(--colors-neutral-600);
  --color-action-neutral-content-disabled: var(--colors-neutral-300);

  /* Surface Colors */
  --color-surface-canvas: var(--colors-neutral-100);
  --color-surface-canvas-dark: var(--colors-neutral-200);
  --color-surface-white: var(--colors-white-000);
  --color-surface-light-5: var(--colors-white-50);
  --color-surface-light-30: var(--colors-white-300);
  --color-surface-light-50: var(--colors-white-500);
  --color-surface-light-80: var(--colors-white-800);
  --color-surface-dark-10: var(--colors-black-100);
  --color-surface-dark-30: var(--colors-black-300);
  --color-surface-dark-80: var(--colors-black-800);
  --color-surface-black: var(--colors-black-000);
  --color-surface-overlay: var(--colors-neutral-50);
  --color-surface-premium: var(--colors-secondary-200);

  /* Feedback Colors */
  --color-feedback-error-surface: var(--colors-error-100);
  --color-feedback-error-content: var(--colors-error-700);
  --color-feedback-info-surface: var(--colors-info-400);
  --color-feedback-info-content: var(--colors-white-000);
  --color-feedback-success-surface: var(--colors-success-400);
  --color-feedback-success-content: var(--colors-black-000);
  --color-feedback-warning-surface: var(--colors-warning-400);
  --color-feedback-warning-content: var(--colors-white-000);

  /* Error/Warning/Success Subtle */
  --color-error-subtle: var(--colors-error-100);
  --color-error-strong: var(--colors-error-700);
  --color-warning-subtle: var(--colors-warning-400);
  --color-warning-strong: var(--colors-warning-700);
  --color-success-subtle: var(--colors-success-400);
  --color-success-strong: var(--colors-success-700);
  --color-info-subtle: var(--colors-info-400);
  --color-info-strong: var(--colors-info-700);
  --color-neutral-subtle: var(--colors-neutral-200);
  --color-neutral-strong: var(--colors-neutral-700);

  /* Line Colors */
  --color-line-dark: var(--colors-black-300);
  --color-line-medium: var(--colors-black-200);
  --color-line-light: var(--colors-black-100);
  --color-line-error: var(--colors-error-500);
  --color-line-success: var(--colors-success-500);
  --color-line-warning: var(--colors-warning-500);
  --color-line-white: var(--colors-white-000);
  --color-line-premium: var(--colors-secondary-200);

  /* Text Colors */
  --color-text-primary: var(--colors-neutral-900);
  --color-text-secondary: var(--colors-neutral-600);
  --color-text-inverted: var(--colors-white-000);
  --color-text-error: var(--colors-error-700);
  --color-text-body: var(--colors-neutral-900);
  --color-text-disabled: var(--colors-neutral-300);
  --color-text-link: var(--colors-primary-700);
  --color-text-white: var(--colors-white-000);

  /* Icon Colors */
  --color-icon-default: var(--colors-neutral-900);
  --color-icon-secondary: var(--colors-neutral-600);
  --color-icon-inverted: var(--colors-white-000);
  --color-icon-error: var(--colors-error-700);
  --color-icon-info: var(--colors-info-500);
  --color-icon-success: var(--colors-success-500);
  --color-icon-warning: var(--colors-warning-500);
  --color-icon-disabled: var(--colors-neutral-300);
  --color-icon-premium: var(--colors-secondary-600);

  /* Border Input */
  --color-border-input-focus: var(--colors-primary-500);

  /* Dimensions */
  --dimensions-0: 0px;
  --dimensions-1: 4px;
  --dimensions-2: 8px;
  --dimensions-3: 12px;
  --dimensions-4: 16px;
  --dimensions-5: 20px;
  --dimensions-6: 24px;
  --dimensions-7: 28px;
  --dimensions-8: 32px;
  --dimensions-9: 36px;
  --dimensions-10: 40px;
  --dimensions-11: 44px;
  --dimensions-12: 48px;
  --dimensions-14: 56px;
  --dimensions-16: 64px;
  --dimensions-20: 80px;
  --dimensions-24: 96px;
  --dimensions-28: 112px;
  --dimensions-32: 128px;
  --dimensions-36: 144px;
  --dimensions-40: 160px;
  --dimensions-48: 192px;
  --dimensions-52: 208px;
  --dimensions-56: 224px;
  --dimensions-60: 240px;
  --dimensions-64: 256px;
  --dimensions-72: 288px;
  --dimensions-80: 320px;
  --dimensions-90: 360px;
  --dimensions-96: 384px;
  --dimensions-px: 1px;
  --dimensions-half: 2px;

  /* Spacing */
  --spacing-xsmall: var(--dimensions-half);
  --spacing-small: var(--dimensions-1);
  --spacing-medium: var(--dimensions-2);
  --spacing-large: var(--dimensions-3);
  --spacing-xlarge: var(--dimensions-4);
  --spacing-2xlarge: var(--dimensions-6);
  --spacing-3xlarge: var(--dimensions-8);
  --spacing-4xlarge: var(--dimensions-12);

  /* Border Radius */
  --radius-small: var(--dimensions-1);
  --radius-medium: var(--dimensions-2);
  --radius-large: var(--dimensions-3);
  --radius-xlarge: var(--dimensions-4);
  --radius-xxlarge: var(--dimensions-8);
  --radius-round: var(--dimensions-24);

  /* Typography - Desktop */
  --font-desktop-font-size-display: 93px;
  --font-desktop-font-size-display-small: 51px;
  --font-desktop-font-size-h1: 40px;
  --font-desktop-font-size-h2: 32px;
  --font-desktop-font-size-h3: 26px;
  --font-desktop-font-size-body: 16px;
  --font-desktop-font-size-label: 14px;
  --font-desktop-line-height-display: 93px;
  --font-desktop-line-height-display-small: 48px;
  --font-desktop-line-height-h1: 40px;
  --font-desktop-line-height-h2: 28px;
  --font-desktop-line-height-h3: 24px;
  --font-desktop-line-height-body: 24px;
  --font-desktop-line-height-label: 22px;
  --font-desktop-letter-spacing-display: -1px;
  --font-desktop-letter-spacing-display-small: -0.5px;
  --font-desktop-letter-spacing-h1: -0.5px;
  --font-desktop-letter-spacing-h2: -0.3px;
  --font-desktop-letter-spacing-h3: -0.2px;
  --font-desktop-letter-spacing-body: 0px;
  --font-desktop-letter-spacing-label: 0.25px;

  /* Typography - Mobile */
  --font-mobile-font-size-display: 50px;
  --font-mobile-font-size-h1: 38px;
  --font-mobile-font-size-h2: 33px;
  --font-mobile-font-size-h3: 25px;
  --font-mobile-font-size-body: 16px;
  --font-mobile-font-size-label: 14px;
  --font-mobile-font-size-caption: 12px;
  --font-mobile-line-height-display: 50px;
  --font-mobile-line-height-h1: 42px;
  --font-mobile-line-height-h2: 36px;
  --font-mobile-line-height-h3: 27px;
  --font-mobile-line-height-body: 24px;
  --font-mobile-line-height-label: 22px;
  --font-mobile-line-height-caption: 18px;
  --font-mobile-letter-spacing-display: -0.8px;
  --font-mobile-letter-spacing-h1: -0.5px;
  --font-mobile-letter-spacing-h2: -0.5px;
  --font-mobile-letter-spacing-h3: -0.3px;
  --font-mobile-letter-spacing-body: 0px;
  --font-mobile-letter-spacing-label: 0.25px;
  --font-mobile-letter-spacing-caption: 0.4px;

  /* Font Families */
  --font-values-font-family-heading: "Belleza", "Georgia", "Times New Roman",
    serif;
  --font-values-font-family-body: "Source Sans 3", "Helvetica Neue", Helvetica,
    Arial, sans-serif;

  /* Font Weights */
  --font-values-font-weight-regular: 400;
  --font-values-font-weight-medium: 500;
  --font-values-font-weight-semi-bold: 600;
  --font-values-font-weight-bold: 700;

  /* Mapped Font Families */
  --font-desktop-font-family-display: var(--font-values-font-family-heading);
  --font-desktop-font-family-display-small: var(--font-values-font-family-heading);
  --font-desktop-font-family-h1: var(--font-values-font-family-heading);
  --font-desktop-font-family-h2: var(--font-values-font-family-heading);
  --font-desktop-font-family-h3: var(--font-values-font-family-heading);
  --font-desktop-font-family-body: var(--font-values-font-family-body);
  --font-desktop-font-family-label: var(--font-values-font-family-body);
  --font-mobile-font-family-display: var(--font-values-font-family-heading);
  --font-mobile-font-family-h1: var(--font-values-font-family-heading);
  --font-mobile-font-family-h2: var(--font-values-font-family-heading);
  --font-mobile-font-family-h3: var(--font-values-font-family-heading);
  --font-mobile-font-family-body: var(--font-values-font-family-body);
  --font-mobile-font-family-label: var(--font-values-font-family-body);
  --font-mobile-font-family-caption: var(--font-values-font-family-body);

  /* Stroke */
  --stroke-thin: var(--dimensions-px);
  --stroke-medium: var(--dimensions-half);
}