/**
 * SilverSingles Design Tokens
 */

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

  /* Primary Colors - Slate Gray */
  --colors-primary-100: #eaf3f5;
  --colors-primary-200: #d1e3e8;
  --colors-primary-300: #b1c5ce;
  --colors-primary-400: #8698a3;
  --colors-primary-500: #5d6b78;
  --colors-primary-600: #454d59;
  --colors-primary-700: #393c47;
  --colors-primary-800: #2c2d35;
  --colors-primary-900: #1f1f24;

  /* Secondary Colors - Warm Gold/Peach */
  --colors-secondary-100: #fff5e0;
  --colors-secondary-200: #ffe6bc;
  --colors-secondary-300: #fad194;
  --colors-secondary-400: #ecba7c;
  --colors-secondary-500: #dea366;
  --colors-secondary-600: #9e7857;
  --colors-secondary-700: #644f3f;
  --colors-secondary-800: #41362f;
  --colors-secondary-900: #38312d;

  /* Neutral Colors */
  --colors-neutral-50: #f2f9fa;
  --colors-neutral-100: #eaf3f5;
  --colors-neutral-200: #d6e1e5;
  --colors-neutral-300: #bec8ce;
  --colors-neutral-400: #a0aab0;
  --colors-neutral-500: #828a8f;
  --colors-neutral-600: #5a6065;
  --colors-neutral-700: #3c4144;
  --colors-neutral-800: #2a2e31;
  --colors-neutral-900: #232629;

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

  /* 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-default: var(--colors-primary-600);
  --colors-logo-reverse: #fff9ec;
  --colors-logo-splash: #fff9ec;

  /* 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-surface-default-darker: var(--colors-neutral-300);
  --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;
  --dimensions-icon-stroke-width: 1.5px;

  /* 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);
  --spacing-5xlarge: var(--dimensions-16);

  /* Border Radius */
  --radius-round-override: var(--dimensions-4);
  --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(--radius-round-override);

  /* Typography - Desktop */
  --font-desktop-font-size-display: 102px;
  --font-desktop-font-size-display-small: 55px;
  --font-desktop-font-size-h1: 44px;
  --font-desktop-font-size-h2: 36px;
  --font-desktop-font-size-h3: 28px;
  --font-desktop-font-size-body: 20px;
  --font-desktop-font-size-label: 17px;
  --font-desktop-line-height-display: 100px;
  --font-desktop-line-height-display-small: 60px;
  --font-desktop-line-height-h1: 48px;
  --font-desktop-line-height-h2: 39px;
  --font-desktop-line-height-h3: 31px;
  --font-desktop-line-height-body: 27px;
  --font-desktop-line-height-label: 24px;
  --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: 55px;
  --font-mobile-font-size-h1: 42px;
  --font-mobile-font-size-h2: 36px;
  --font-mobile-font-size-h3: 27px;
  --font-mobile-font-size-body: 19px;
  --font-mobile-font-size-label: 17px;
  --font-mobile-font-size-caption: 15px;
  --font-mobile-line-height-display: 55px;
  --font-mobile-line-height-h1: 46px;
  --font-mobile-line-height-h2: 39px;
  --font-mobile-line-height-h3: 30px;
  --font-mobile-line-height-body: 26px;
  --font-mobile-line-height-label: 24px;
  --font-mobile-line-height-caption: 20px;
  --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: "Archivo Narrow";
  --font-values-font-family-body: "DM Sans";

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

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

  /* Desktop Font Weight Mappings */
  --font-desktop-font-weight-display: var(--font-values-font-weight-regular);
  --font-desktop-font-weight-display-small: var(
    --font-values-font-weight-medium
  );
  --font-desktop-font-weight-h1: var(--font-values-font-weight-medium);
  --font-desktop-font-weight-h2: var(--font-values-font-weight-medium);
  --font-desktop-font-weight-h3: var(--font-values-font-weight-medium);
  --font-desktop-font-weight-body-light: var(--font-values-font-weight-light);
  --font-desktop-font-weight-body-regular: var(
    --font-values-font-weight-regular
  );
  --font-desktop-font-weight-body-medium: var(--font-values-font-weight-medium);
  --font-desktop-font-weight-body-semibold: var(
    --font-values-font-weight-semi-bold
  );
  --font-desktop-font-weight-body-bold: var(--font-values-font-weight-bold);
  --font-desktop-font-weight-label-regular: var(
    --font-values-font-weight-regular
  );
  --font-desktop-font-weight-label-medium: var(
    --font-values-font-weight-medium
  );
  --font-desktop-font-weight-label-semibold: var(
    --font-values-font-weight-semi-bold
  );
  --font-desktop-font-weight-label-bold: var(--font-values-font-weight-bold);

  /* Mobile Font Weight Mappings */
  --font-mobile-font-weight-display: var(--font-values-font-weight-medium);
  --font-mobile-font-weight-h1: var(--font-values-font-weight-medium);
  --font-mobile-font-weight-h2: var(--font-values-font-weight-medium);
  --font-mobile-font-weight-h3: var(--font-values-font-weight-medium);
  --font-mobile-font-weight-body-regular: var(
    --font-values-font-weight-regular
  );
  --font-mobile-font-weight-body-medium: var(--font-values-font-weight-medium);
  --font-mobile-font-weight-body-semibold: var(
    --font-values-font-weight-semi-bold
  );
  --font-mobile-font-weight-body-bold: var(--font-values-font-weight-bold);
  --font-mobile-font-weight-label-regular: var(
    --font-values-font-weight-regular
  );
  --font-mobile-font-weight-label-medium: var(--font-values-font-weight-medium);
  --font-mobile-font-weight-label-semibold: var(
    --font-values-font-weight-semi-bold
  );
  --font-mobile-font-weight-label-bold: var(--font-values-font-weight-bold);
  --font-mobile-font-weight-caption-regular: var(
    --font-values-font-weight-regular
  );
  --font-mobile-font-weight-caption-medium: var(
    --font-values-font-weight-medium
  );

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