/**
 * Offline Brand Styles
 * CSS Custom Properties and Utility Classes
 *
 * This file contains all brand-specific CSS variables and utility classes
 * used across Offline properties.
 */

/* ========================================
   ROOT VARIABLES
   ======================================== */

:root {
  /* Colors - Black */
  --black: rgba(0, 0, 0, 1);

  /* Colors - Gray Scale */
  --colors-gray-25: rgba(242, 242, 242, 1);
  --colors-gray-50: rgba(236, 236, 236, 1);
  --colors-gray-100: rgba(223, 223, 223, 1);
  --colors-gray-200: rgba(198, 198, 198, 1);
  --colors-gray-300: rgba(174, 174, 174, 1);
  --colors-gray-400: rgba(149, 149, 149, 1);
  --colors-gray-500: rgba(124, 124, 124, 1);
  --colors-gray-600: rgba(99, 99, 99, 1);
  --colors-gray-700: rgba(74, 74, 74, 1);
  --colors-gray-800: rgba(50, 50, 50, 1);
  --colors-gray-900: rgba(25, 25, 25, 1);
  --gray-900: rgba(37, 37, 37, 1);

  /* Neutral Gray Aliases */
  --neutral-gray25: rgba(242, 242, 242, 1);
  --neutral-gray50: rgba(236, 236, 236, 1);
  --neutral-gray100: rgba(223, 223, 223, 1);
  --neutral-gray200: rgba(198, 198, 198, 1);
  --neutral-gray300: rgba(174, 174, 174, 1);
  --neutral-gray400: rgba(149, 149, 149, 1);
  --neutral-gray500: rgba(124, 124, 124, 1);
  --neutral-gray600: rgba(99, 99, 99, 1);
  --neutral-gray700: rgba(74, 74, 74, 1);
  --neutral-gray800: rgba(50, 50, 50, 1);
  --neutral-gray900: rgba(25, 25, 25, 1);

  /* Colors - Yellow (Primary Brand) */
  --colors-yellow-25: rgba(255, 242, 216, 1);
  --colors-yellow-50: rgba(255, 233, 189, 1);
  --colors-yellow-100: rgba(255, 211, 134, 1);
  --colors-yellow-200: rgba(255, 189, 84, 1);
  --colors-yellow-300: rgba(240, 165, 44, 1);
  --colors-yellow-400: rgba(222, 142, 15, 1);
  --colors-yellow-500: rgba(197, 121, 0, 1);
  --colors-yellow-600: rgba(167, 103, 0, 1);
  --colors-yellow-700: rgba(131, 81, 0, 1);
  --colors-yellow-800: rgba(92, 57, 0, 1);
  --colors-yellow-900: rgba(51, 31, 0, 1);

  /* Yellow Aliases */
  --p-yellow25: rgba(255, 242, 216, 1);
  --p-yellow50: rgba(255, 233, 189, 1);
  --p-yellow100: rgba(255, 211, 134, 1);
  --p-yellow200: rgba(255, 189, 84, 1);
  --p-yellow300: rgba(240, 165, 44, 1);
  --p-yellow400: rgba(222, 142, 15, 1);
  --p-yellow500: rgba(197, 121, 0, 1);
  --p-yellow600: rgba(167, 103, 0, 1);
  --p-yellow700: rgba(131, 81, 0, 1);
  --p-yellow800: rgba(92, 57, 0, 1);
  --p-yellow900: rgba(51, 31, 0, 1);

  /* Colors - Blue (Secondary) */
  --colors-blue-25: rgba(216, 231, 255, 1);
  --colors-blue-50: rgba(190, 214, 255, 1);
  --colors-blue-100: rgba(133, 175, 255, 1);
  --colors-blue-200: rgba(80, 139, 255, 1);
  --colors-blue-300: rgba(35, 106, 255, 1);
  --colors-blue-400: rgba(0, 79, 255, 1);
  --colors-blue-500: rgba(0, 70, 224, 1);
  --colors-blue-600: rgba(0, 59, 187, 1);
  --colors-blue-700: rgba(0, 46, 145, 1);
  --colors-blue-800: rgba(0, 31, 99, 1);
  --colors-blue-900: rgba(0, 16, 51, 1);

  /* Blue Aliases */
  --s-blue25: rgba(216, 231, 255, 1);
  --s-blue50: rgba(190, 214, 255, 1);
  --s-blue100: rgba(133, 175, 255, 1);
  --s-blue200: rgba(80, 139, 255, 1);
  --s-blue300: rgba(35, 106, 255, 1);
  --s-blue400: rgba(0, 79, 255, 1);
  --s-blue500: rgba(0, 70, 224, 1);
  --s-blue600: rgba(0, 59, 187, 1);
  --s-blue700: rgba(0, 46, 145, 1);
  --s-blue800: rgba(0, 31, 99, 1);
  --s-blue900: rgba(0, 16, 51, 1);

  /* Colors - Teal */
  --colors-teal-25: rgba(226, 245, 249, 1);
  --colors-teal-50: rgba(211, 237, 242, 1);
  --colors-teal-100: rgba(169, 221, 232, 1);
  --colors-teal-200: rgba(134, 204, 218, 1);
  --colors-teal-300: rgba(107, 187, 201, 1);
  --colors-teal-400: rgba(68, 168, 188, 1);
  --colors-teal-500: rgba(37, 148, 171, 1);
  --colors-teal-600: rgba(24, 127, 147, 1);
  --colors-teal-700: rgba(13, 101, 118, 1);
  --colors-teal-800: rgba(5, 72, 85, 1);
  --colors-teal-900: rgba(0, 43, 51, 1);
  --teal-500: rgba(20, 184, 167, 1);

  /* Teal Aliases */
  --s-teal25: rgba(226, 245, 249, 1);
  --s-teal50: rgba(211, 237, 242, 1);
  --s-teal100: rgba(169, 221, 232, 1);
  --s-teal200: rgba(134, 204, 218, 1);
  --s-teal300: rgba(107, 187, 201, 1);
  --s-teal400: rgba(68, 168, 188, 1);
  --s-teal500: rgba(37, 148, 171, 1);
  --s-teal600: rgba(24, 127, 147, 1);
  --s-teal700: rgba(13, 101, 118, 1);
  --s-teal800: rgba(5, 72, 85, 1);
  --s-teal900: rgba(0, 43, 51, 1);

  /* Colors - Red */
  --colors-red-25: rgba(254, 215, 212, 1);
  --colors-red-50: rgba(254, 187, 182, 1);
  --colors-red-100: rgba(249, 134, 125, 1);
  --colors-red-200: rgba(241, 87, 75, 1);
  --colors-red-300: rgba(228, 52, 38, 1);
  --colors-red-400: rgba(211, 26, 12, 1);
  --colors-red-500: rgba(189, 13, 0, 1);
  --colors-red-600: rgba(161, 11, 0, 1);
  --colors-red-700: rgba(127, 9, 0, 1);
  --colors-red-800: rgba(90, 6, 0, 1);
  --colors-red-900: rgba(51, 3, 0, 1);

  /* Red Aliases */
  --s-red25: rgba(254, 215, 212, 1);
  --s-red50: rgba(254, 187, 182, 1);
  --s-red100: rgba(249, 134, 125, 1);
  --s-red200: rgba(241, 87, 75, 1);
  --s-red300: rgba(228, 52, 38, 1);
  --s-red400: rgba(211, 26, 12, 1);
  --s-red500: rgba(189, 13, 0, 1);
  --s-red600: rgba(161, 11, 0, 1);
  --s-red700: rgba(127, 9, 0, 1);
  --s-red800: rgba(90, 6, 0, 1);
  --s-red900: rgba(51, 3, 0, 1);

  /* Semantic Error Colors */
  --semantic-error25: rgba(255, 236, 236, 1);
  --semantic-error50: rgba(255, 210, 210, 1);
  --semantic-error100: rgba(255, 184, 184, 1);
  --semantic-error200: rgba(255, 156, 156, 1);
  --semantic-error300: rgba(255, 127, 127, 1);
  --semantic-error400: rgba(255, 85, 85, 1);
  --semantic-error500: rgba(254, 49, 49, 1);
  --semantic-error600: rgba(233, 20, 20, 1);
  --semantic-error700: rgba(178, 38, 38, 1);
  --semantic-error800: rgba(120, 42, 42, 1);
  --semantic-error900: rgba(64, 32, 32, 1);

  /* Colors - Green */
  --colors-green-500: rgba(57, 185, 108, 1);
  --semantic-success500: rgba(9, 146, 80, 1);

  /* Typography - Display Styles (Cabinet Grotesk) */
  --display-large-font-family: "Cabinet Grotesk", Helvetica;
  --display-large-font-size: 36px;
  --display-large-font-style: normal;
  --display-large-font-weight: 800;
  --display-large-letter-spacing: 0px;
  --display-large-line-height: 100%;

  --display-medium-font-family: "Cabinet Grotesk", Helvetica;
  --display-medium-font-size: 32px;
  --display-medium-font-style: normal;
  --display-medium-font-weight: 800;
  --display-medium-letter-spacing: 0px;
  --display-medium-line-height: 100%;

  --display-small-font-family: "Cabinet Grotesk", Helvetica;
  --display-small-font-size: 29px;
  --display-small-font-style: normal;
  --display-small-font-weight: 800;
  --display-small-letter-spacing: 0px;
  --display-small-line-height: 100%;

  /* Typography - Headline Styles (Satoshi) */
  --headline-large-font-family: "Satoshi", Helvetica;
  --headline-large-font-size: 26px;
  --headline-large-font-style: normal;
  --headline-large-font-weight: 700;
  --headline-large-letter-spacing: 0px;
  --headline-large-line-height: 32px;

  --headline-medium-font-family: "Satoshi", Helvetica;
  --headline-medium-font-size: 23px;
  --headline-medium-font-style: normal;
  --headline-medium-font-weight: 700;
  --headline-medium-letter-spacing: 0px;
  --headline-medium-line-height: 28px;

  --headline-small-font-family: "Satoshi", Helvetica;
  --headline-small-font-size: 20px;
  --headline-small-font-style: normal;
  --headline-small-font-weight: 700;
  --headline-small-letter-spacing: 0px;
  --headline-small-line-height: 24px;

  /* Typography - Title Styles (Satoshi) */
  --title-large-font-family: "Satoshi", Helvetica;
  --title-large-font-size: 18px;
  --title-large-font-style: normal;
  --title-large-font-weight: 700;
  --title-large-letter-spacing: 0px;
  --title-large-line-height: 22px;

  --title-medium-font-family: "Satoshi", Helvetica;
  --title-medium-font-size: 16px;
  --title-medium-font-style: normal;
  --title-medium-font-weight: 700;
  --title-medium-letter-spacing: 0px;
  --title-medium-line-height: 20px;

  --title-small-font-family: "Satoshi", Helvetica;
  --title-small-font-size: 14px;
  --title-small-font-style: normal;
  --title-small-font-weight: 700;
  --title-small-letter-spacing: 0px;
  --title-small-line-height: 18px;

  /* Typography - Body Styles (Satoshi) */
  --body-large-font-family: "Satoshi", Helvetica;
  --body-large-font-size: 16px;
  --body-large-font-style: normal;
  --body-large-font-weight: 500;
  --body-large-letter-spacing: 0px;
  --body-large-line-height: 24px;

  --body-medium-font-family: "Satoshi", Helvetica;
  --body-medium-font-size: 14px;
  --body-medium-font-style: normal;
  --body-medium-font-weight: 500;
  --body-medium-letter-spacing: 0px;
  --body-medium-line-height: 20px;

  --body-small-font-family: "Satoshi", Helvetica;
  --body-small-font-size: 12px;
  --body-small-font-style: normal;
  --body-small-font-weight: 500;
  --body-small-letter-spacing: 0px;
  --body-small-line-height: 16px;

  --body-x-small-font-family: "Satoshi", Helvetica;
  --body-x-small-font-size: 10px;
  --body-x-small-font-style: normal;
  --body-x-small-font-weight: 500;
  --body-x-small-letter-spacing: 0px;
  --body-x-small-line-height: 14px;

  /* Typography - Label Styles (Satoshi) */
  --label-large-font-family: "Satoshi", Helvetica;
  --label-large-font-size: 14px;
  --label-large-font-style: normal;
  --label-large-font-weight: 700;
  --label-large-letter-spacing: 0px;
  --label-large-line-height: 18px;

  --label-medium-font-family: "Satoshi", Helvetica;
  --label-medium-font-size: 12px;
  --label-medium-font-style: normal;
  --label-medium-font-weight: 700;
  --label-medium-letter-spacing: 0px;
  --label-medium-line-height: 16px;

  --label-small-font-family: "Satoshi", Helvetica;
  --label-small-font-size: 10px;
  --label-small-font-style: normal;
  --label-small-font-weight: 700;
  --label-small-letter-spacing: 0px;
  --label-small-line-height: 14px;

  /* Shadows */
  --card-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 2px 0px rgba(0, 0, 0, 0.05),
    0px 6px 3px 0px rgba(0, 0, 0, 0.03), 0px 10px 4px 0px rgba(0, 0, 0, 0.01), 0px 15px 4px 0px rgba(0, 0, 0, 0);
  --new-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1), 0px 13px 13px 0px rgba(0, 0, 0, 0.09),
    0px 29px 17px 0px rgba(0, 0, 0, 0.05), 0px 52px 21px 0px rgba(0, 0, 0, 0.01), 0px 81px 23px 0px rgba(0, 0, 0, 0);
  --tag-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(0, 0, 0, 0.09),
    0px 9px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0);

  /* Border Radius */
  --primitives-radius-s: 4px;
}

/* ========================================
   TYPOGRAPHY UTILITY CLASSES
   ======================================== */

.display-large {
  font-family: var(--display-large-font-family);
  font-size: var(--display-large-font-size);
  font-style: var(--display-large-font-style);
  font-weight: var(--display-large-font-weight);
  letter-spacing: var(--display-large-letter-spacing);
  line-height: var(--display-large-line-height);
}

.display-medium {
  font-family: var(--display-medium-font-family);
  font-size: var(--display-medium-font-size);
  font-style: var(--display-medium-font-style);
  font-weight: var(--display-medium-font-weight);
  letter-spacing: var(--display-medium-letter-spacing);
  line-height: var(--display-medium-line-height);
}

.display-small {
  font-family: var(--display-small-font-family);
  font-size: var(--display-small-font-size);
  font-style: var(--display-small-font-style);
  font-weight: var(--display-small-font-weight);
  letter-spacing: var(--display-small-letter-spacing);
  line-height: var(--display-small-line-height);
}

.headline-large {
  font-family: var(--headline-large-font-family);
  font-size: var(--headline-large-font-size);
  font-style: var(--headline-large-font-style);
  font-weight: var(--headline-large-font-weight);
  letter-spacing: var(--headline-large-letter-spacing);
  line-height: var(--headline-large-line-height);
}

.headline-medium {
  font-family: var(--headline-medium-font-family);
  font-size: var(--headline-medium-font-size);
  font-style: var(--headline-medium-font-style);
  font-weight: var(--headline-medium-font-weight);
  letter-spacing: var(--headline-medium-letter-spacing);
  line-height: var(--headline-medium-line-height);
}

.headline-small {
  font-family: var(--headline-small-font-family);
  font-size: var(--headline-small-font-size);
  font-style: var(--headline-small-font-style);
  font-weight: var(--headline-small-font-weight);
  letter-spacing: var(--headline-small-letter-spacing);
  line-height: var(--headline-small-line-height);
}

.title-large {
  font-family: var(--title-large-font-family);
  font-size: var(--title-large-font-size);
  font-style: var(--title-large-font-style);
  font-weight: var(--title-large-font-weight);
  letter-spacing: var(--title-large-letter-spacing);
  line-height: var(--title-large-line-height);
}

.title-medium {
  font-family: var(--title-medium-font-family);
  font-size: var(--title-medium-font-size);
  font-style: var(--title-medium-font-style);
  font-weight: var(--title-medium-font-weight);
  letter-spacing: var(--title-medium-letter-spacing);
  line-height: var(--title-medium-line-height);
}

.title-small {
  font-family: var(--title-small-font-family);
  font-size: var(--title-small-font-size);
  font-style: var(--title-small-font-style);
  font-weight: var(--title-small-font-weight);
  letter-spacing: var(--title-small-letter-spacing);
  line-height: var(--title-small-line-height);
}

.body-large {
  font-family: var(--body-large-font-family);
  font-size: var(--body-large-font-size);
  font-style: var(--body-large-font-style);
  font-weight: var(--body-large-font-weight);
  letter-spacing: var(--body-large-letter-spacing);
  line-height: var(--body-large-line-height);
}

.body-medium {
  font-family: var(--body-medium-font-family);
  font-size: var(--body-medium-font-size);
  font-style: var(--body-medium-font-style);
  font-weight: var(--body-medium-font-weight);
  letter-spacing: var(--body-medium-letter-spacing);
  line-height: var(--body-medium-line-height);
}

.body-small {
  font-family: var(--body-small-font-family);
  font-size: var(--body-small-font-size);
  font-style: var(--body-small-font-style);
  font-weight: var(--body-small-font-weight);
  letter-spacing: var(--body-small-letter-spacing);
  line-height: var(--body-small-line-height);
}

.body-x-small {
  font-family: var(--body-x-small-font-family);
  font-size: var(--body-x-small-font-size);
  font-style: var(--body-x-small-font-style);
  font-weight: var(--body-x-small-font-weight);
  letter-spacing: var(--body-x-small-letter-spacing);
  line-height: var(--body-x-small-line-height);
}

.label-large {
  font-family: var(--label-large-font-family);
  font-size: var(--label-large-font-size);
  font-style: var(--label-large-font-style);
  font-weight: var(--label-large-font-weight);
  letter-spacing: var(--label-large-letter-spacing);
  line-height: var(--label-large-line-height);
}

.label-medium {
  font-family: var(--label-medium-font-family);
  font-size: var(--label-medium-font-size);
  font-style: var(--label-medium-font-style);
  font-weight: var(--label-medium-font-weight);
  letter-spacing: var(--label-medium-letter-spacing);
  line-height: var(--label-medium-line-height);
}

.label-small {
  font-family: var(--label-small-font-family);
  font-size: var(--label-small-font-size);
  font-style: var(--label-small-font-style);
  font-weight: var(--label-small-font-weight);
  letter-spacing: var(--label-small-letter-spacing);
  line-height: var(--label-small-line-height);
}

/* Navigation Styles */
.nav-label {
  letter-spacing: 0.33em;
  margin-bottom: 1rem;
  font-family: Open Sans, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
}

.nav-link {
  font-family: Satoshi, sans-serif;
  font-size: 22px;
  font-weight: 500;
  transition: opacity 0.3s;
}

/* ========================================
   PREMIUM STYLING
   ======================================== */

.premium-label {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  background-color: black;
  color: var(--colors-yellow-400);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid var(--colors-gray-800);
  position: relative;
  overflow: hidden;
}

.premium-text {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  position: relative;
  z-index: 10;
  background: linear-gradient(to bottom right, var(--colors-yellow-600), var(--colors-yellow-100) 35%, var(--colors-yellow-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-box {
  border: 2px solid var(--colors-yellow-400);
  position: relative;
  background-color: black;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  z-index: 30;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.2s ease-in-out 0s 2;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease;
}