/*
  Global design tokens extracted from the Ricochet Figma source.
  This file defines reusable color and typography variables for use
  across the project and avoids component-specific styling.
*/

:root {
  /* Colors: brand */
  --color-primary: #00987c;
  --color-secondary: #412445;
  --color-accent: #f95658;
  --color-accent-alt: #4a6ba7;
  --color-tertiary: #3a5447;
  --color-tertiary-alt: #963635;

  /* Colors: neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg-light: #ffffff;
  --color-bg-dark: #000000;
  --color-bg-muted: #676767;
  --color-surface: #ededed;
  --color-surface-muted: #dddddd;
  --color-text-light: #ffffff;
  --color-text-medium: #959393;
  --color-text-dark: #000000;

  /* Colors: palette shades */
  --color-eggplant-500: #412445;
  --color-eggplant-300: #9062a8;
  --color-eggplant-100: #dfe0ef;

  --color-ivy-500: #3a5447;
  --color-ivy-100: #def6ef;
  --color-brick-500: #963635;
  --color-brick-100: #fee7d8;
  --color-watermelon-500: #f95658;
  --color-watermelon-100: #ffe2e2;
  --color-slate-blue-500: #4a6ba7;
  --color-slate-blue-100: #eaf2fc;

  /* Typography: font families */
  --font-primary: "Graftyne Display", Arial, sans-serif;
  --font-secondary: "Poppins", Arial, sans-serif;

  /* Typography: font sizes */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-52: 52px;
  --fs-54: 54px;
  --fs-80: 80px;

  /* Typography: semantic sizes */
  --fs-caption: var(--fs-12);
  --fs-link: var(--fs-14);
  --fs-label: var(--fs-14);
  --fs-section: var(--fs-16);
  --fs-body: var(--fs-18);
  --fs-h5: var(--fs-14);
  --fs-h4: var(--fs-21);
  --fs-h3: var(--fs-36);
  --fs-h2: var(--fs-54);
  --fs-h1: var(--fs-80);

  /* Typography: font weights */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Typography: line heights */
  --lh-110: 1.1;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;

  /* Typography: letter spacing */
  --ls-0: 0;
  --ls-07: 0.7px;

  /* Layout: spacing scale */
  --tiny-space: 10px;
  --small-space: 20px;
  --medium-space: 40px;
  --large-space: 80px;
  --huge-space: 160px;

  /* Typography: semantic text styles */
  --font-display-xl: var(--fw-400) condensed var(--fs-h1) / var(--lh-110) var(--font-primary);
  --font-display-lg: var(--fw-500) condensed var(--fs-h2) / var(--lh-120) var(--font-primary);
  --font-display-md: var(--fw-500) condensed var(--fs-h3) / var(--lh-120) var(--font-primary);
  --font-heading-sm: var(--fw-500) condensed var(--fs-h4) / var(--lh-130) var(--font-primary);
  --font-overline: var(--fw-600) var(--fs-h5) / var(--lh-140) var(--font-primary);
  --font-body-default: var(--fw-400) var(--fs-body) / var(--lh-140) var(--font-secondary);
  --font-link: var(--fw-500) var(--fs-link) / var(--lh-140) var(--font-primary);
  --font-caption: var(--fw-400) var(--fs-caption) / var(--lh-150) var(--font-secondary);
}

/* Layout: global box model */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--color-black);
  color: var(--color-text-light);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all .1s ease;
}

img {
  max-width: 100%;
  outline: none;
}

h1 {
  font: var(--font-display-xl);
  font-variant-ligatures: none;
}

h2 {
  font: var(--font-display-lg);
  font-variant-ligatures: none;
}

h3 {
  font: var(--font-display-md);
  font-variant-ligatures: none;
}

h4 {
  font: var(--font-heading-sm);
  font-variant-ligatures: none;
}

h5 {
  font: var(--font-overline);
  font-variant-ligatures: none;
}

p {
  font: var(--font-body-default);
}

.p-caption {
  font-size: var(--fs-caption);
  display: inline;
}

/* Layout: spacing utilities */
.py-tiny {
  padding-top: var(--tiny-space);
  padding-bottom: var(--tiny-space);
}

.py-small {
  padding-top: var(--small-space);
  padding-bottom: var(--small-space);
}

.py-medium {
  padding-top: var(--medium-space);
  padding-bottom: var(--medium-space);
}

.py-large {
  padding-top: var(--large-space);
  padding-bottom: var(--large-space);
}

.py-huge {
  padding-top: var(--huge-space);
  padding-bottom: var(--huge-space);
}

.my-tiny {
  margin-top: var(--tiny-space);
  margin-bottom: var(--tiny-space);
}

.pt-tiny {
  padding-top: var(--tiny-space);
}

.pt-small {
  padding-top: var(--small-space);
}

.pt-medium {
  padding-top: var(--medium-space);
}

.pt-large {
  padding-top: var(--large-space);
}

.pt-huge {
  padding-top: var(--huge-space);
}

.pb-tiny {
  padding-bottom: var(--tiny-space);
}

.mb-tiny {
  margin-bottom: var(--tiny-space);
}

.pb-small {
  padding-bottom: var(--small-space);
}

.pb-medium {
  padding-bottom: var(--medium-space);
}

.pb-large {
  padding-bottom: var(--large-space);
}

.pb-huge {
  padding-bottom: var(--huge-space);
}

/* Layout: container system */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-right: var(--large-space);
  padding-left: var(--large-space);
}

/* Grid: 12-column system */
.grid {
  display: grid;
}

.grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid--gap-tiny {
  gap: var(--tiny-space);
}

.grid--gap-small {
  gap: var(--small-space);
}

.grid--gap-medium {
  gap: var(--medium-space);
}

.grid--gap-large {
  gap: var(--large-space);
}
/* trial form */

.trial-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Small-Space, 20px);
  flex: 1 0 0;
  align-self: stretch;
}

.trial-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch; 
  flex-wrap: wrap;
}

.trial-row-2 {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px;
  align-self: stretch;
  flex-wrap: wrap;
}

.trial-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--Tiny-Space, 10px);
  flex: 1 0 0;
}

.trial-field-full {
  display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: var(--Tiny-Space, 10px);
align-self: stretch;
}

.form-required {
  color: red;
}

.border-red-500 {
  border-color: red;
}

.form-input {
  display: flex;
  width:100%;
  padding: 10px;
  align-items: flex-end;
  gap: 10px;
  align-self: stretch;
}

.check-scale {
  transform: scale(1.5);
}

/* Components: global button system */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: white;
  padding: 11px 40px 9px 40px;
  font: var(--font-link);
  font-variant-ligatures: none;
  line-height: 0.715;
  text-align: center;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.1s ease;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.40) 100%);
  background-size: 200% 100%;
}

.primary-button:hover {
  background-position: 99% 0;
}

.primary-button--watermelon {
  background-color: var(--Watermelon, #F95658);
}

.primary-button--black {
  background-color: var(--Black, #000);
}

.primary-button--purple {
  background-color: var(--Eggplant-mid, #9062A8);
}

.primary-button--blue {
  background-color: var(--Slate-blue, #4A6BA7);
}

.secondary-button-noclick {
  display: inline-flex;
  padding: 11px 10px 9px 10px;
  margin-right: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  border: gray 1px dashed;
  font: var(--font-link);
  line-height: 0.715;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
  transition: all 0.1s ease;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.40) 100%);
  background-size: 200% 100%;
}

.secondary-button--light--noclick {
  border: 1px dashed var(--Teal, #00987C);
  color: var(--Teal, #00987C);
  background: #e6faf7;
}

.secondary-button {
  display: inline-flex;
  padding: 11px 40px 9px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  font: var(--font-link);
  line-height: 0.715;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.1s ease;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.40) 100%);
  background-size: 200% 100%;
}

.secondary-button:hover {
  background-position: 99% 0;
}

.secondary-button--teal {
  color: var(--White, #FFF);
  background-color: var(--Teal, #00987C);
}

.secondary-button--light {
  border: 1px solid var(--Teal, #00987C);
  color: var(--Teal, #00987C);
  background: transparent;
}

.secondary-button--light:hover {
  border-color: var(--Black, #000);
  color: var(--Black, #000);
}

.secondary-button--arrow {
  padding: 11px 40px 9px 0;
  gap: var(--Micro-Space, 5px);
  border-radius: 0;
  border: 0;
  color: var(--White, #FFF);
  background: none;
}

.secondary-button--arrow:hover {
  padding: 11px 55px 9px 0px;
  gap: var(--Small-Space, 20px);
  border: 0;
  background: none;
}

.grid--gap-huge {
  gap: var(--huge-space);
}

.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}

@media (max-width: 1024px){
  .container {
    padding-right: 50px;
    padding-left: 50px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-body: 16px;
    --fs-h5: 14px;
    --fs-h4: 20px;
    --fs-h3: 28px;
    --fs-h2: 36px;
    --fs-h1: 52px;
  }

  .container {
    padding-right: 30px;
    padding-left: 30px;
  }

  .grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    grid-column: span 12;
  }
}