/**
 * Jdate Design Tokens
 * Extracted from jdate.html original source
 */

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

  /* Primary Colors - Blue */
  --colors-primary-100: #edf6ff;
  --colors-primary-200: #b8d6f7;
  --colors-primary-300: #7da9e0;
  --colors-primary-400: #4678ba;
  --colors-primary-500: #1c4d94;
  --colors-primary-600: #164282;
  --colors-primary-700: #103770;
  --colors-primary-800: #0c2d5e;
  --colors-primary-900: #08234d;

  /* Secondary Colors - Gold */
  --colors-secondary-100: #fff9f0;
  --colors-secondary-200: #fde8c8;
  --colors-secondary-300: #f6d49e;
  --colors-secondary-400: #ebbd75;
  --colors-secondary-500: #d5a354;
  --colors-secondary-600: #b6863a;
  --colors-secondary-700: #906727;
  --colors-secondary-800: #67491a;
  --colors-secondary-900: #402d10;

  /* Neutral Colors */
  --colors-neutral-50: #faf8f5;
  --colors-neutral-100: #f5f2ed;
  --colors-neutral-200: #e7e5e1;
  --colors-neutral-300: #cbc8c5;
  --colors-neutral-400: #a4a29f;
  --colors-neutral-500: #7a7876;
  --colors-neutral-600: #545251;
  --colors-neutral-700: #373736;
  --colors-neutral-800: #272725;
  --colors-neutral-900: #1f1e1e;

  /* 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: #fffbf2;

  /* Black with opacity */
  --colors-black-50: rgba(0, 0, 0, 0.05);
  --colors-black-100: rgba(0, 0, 0, 0.07);
  --colors-black-200: rgba(0, 0, 0, 0.13);
  --colors-black-300: rgba(0, 0, 0, 0.23);
  --colors-black-400: rgba(0, 0, 0, 0.35);
  --colors-black-500: rgba(0, 0, 0, 0.5);
  --colors-black-600: rgba(0, 0, 0, 0.77);
  --colors-black-700: rgba(0, 0, 0, 0.64);
  --colors-black-800: rgba(0, 0, 0, 0.86);
  --colors-black-900: rgba(0, 0, 0, 0.9);
  --colors-black-000: #000000;

  /* 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;

  /* 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: 80px;
  --font-desktop-font-size-display-small: 40px;
  --font-desktop-font-size-h1: 36px;
  --font-desktop-font-size-h2: 27px;
  --font-desktop-font-size-h3: 21px;
  --font-desktop-font-size-body: 18px;
  --font-desktop-font-size-label: 16px;
  --font-desktop-line-height-display: 96px;
  --font-desktop-line-height-display-small: 48px;
  --font-desktop-line-height-h1: 43px;
  --font-desktop-line-height-h2: 32px;
  --font-desktop-line-height-h3: 25px;
  --font-desktop-line-height-body: 24px;
  --font-desktop-line-height-label: 21px;
  --font-desktop-letter-spacing-display: -0.4px;
  --font-desktop-letter-spacing-h1: 0px;
  --font-desktop-letter-spacing-h2: 0px;
  --font-desktop-letter-spacing-h3: 0px;
  --font-desktop-letter-spacing-body: 0px;
  --font-desktop-letter-spacing-label: 0.25px;

  /* Typography - Mobile */
  --font-mobile-font-size-display: 39px;
  --font-mobile-font-size-h1: 32px;
  --font-mobile-font-size-h2: 27px;
  --font-mobile-font-size-h3: 20px;
  --font-mobile-font-size-body: 18px;
  --font-mobile-font-size-label: 16px;
  --font-mobile-font-size-caption: 15px;
  --font-mobile-line-height-display: 47px;
  --font-mobile-line-height-h1: 38px;
  --font-mobile-line-height-h2: 32px;
  --font-mobile-line-height-h3: 24px;
  --font-mobile-line-height-body: 24px;
  --font-mobile-line-height-label: 21px;
  --font-mobile-line-height-caption: 18px;
  --font-mobile-letter-spacing-display: -0.4px;
  --font-mobile-letter-spacing-h1: 0px;
  --font-mobile-letter-spacing-h2: 0px;
  --font-mobile-letter-spacing-h3: 0px;
  --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: "Lora", serif;
  --font-values-font-family-body: "Alegreya Sans", sans-serif;

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

  /* Mapped Font Families */
  --font-desktop-font-family-display: 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);
}