/* Stone Collective Design Tokens */
/* Extracted from Webflow Relume Style Guide V3.0 */

:root {
  /* ========================================
     COLORS
     ======================================== */

  /* Base Colors */
  --color-white: #ffffff;
  --color-black: #050b0c;

  /* Default (Scheme 1) */
  --color-background: #ffffff;
  --color-text: #050b0c;
  --color-foreground: #f2f2f2;
  --color-border: #d9dada;
  --color-accent: #295a63;

  /* Color Scheme 1 - White/Light */
  --color-scheme-1-background: #ffffff;
  --color-scheme-1-text: #050b0c;
  --color-scheme-1-foreground: #f2f2f2;
  --color-scheme-1-border: #d9dada;
  --color-scheme-1-accent: #295a63;

  /* Color Scheme 2 - Light Gray */
  --color-scheme-2-background: #f2f2f2;
  --color-scheme-2-text: #050b0c;
  --color-scheme-2-foreground: #ffffff;
  --color-scheme-2-border: #d9dada;
  --color-scheme-2-accent: #295a63;

  /* Color Scheme 3 - Gray */
  --color-scheme-3-background: #d9dada;
  --color-scheme-3-text: #050b0c;
  --color-scheme-3-foreground: #f2f2f2;
  --color-scheme-3-border: #bfbfbf;
  --color-scheme-3-accent: #295a63;

  /* Color Scheme 4 - Dark */
  --color-scheme-4-background: #1e2324;
  --color-scheme-4-text: #ffffff;
  --color-scheme-4-foreground: #2a3234;
  --color-scheme-4-border: #3a4548;
  --color-scheme-4-accent: #e0f9fd;

  /* Color Scheme 5 - Light Cyan */
  --color-scheme-5-background: #effcfe;
  --color-scheme-5-text: #050b0c;
  --color-scheme-5-foreground: #ffffff;
  --color-scheme-5-border: #d9dada;
  --color-scheme-5-accent: #295a63;

  /* Color Scheme 6 - Cyan */
  --color-scheme-6-background: #e0f9fd;
  --color-scheme-6-text: #050b0c;
  --color-scheme-6-foreground: #effcfe;
  --color-scheme-6-border: #c5f0f5;
  --color-scheme-6-accent: #295a63;

  /* Color Scheme 7 - Teal */
  --color-scheme-7-background: #295a63;
  --color-scheme-7-text: #ffffff;
  --color-scheme-7-foreground: #1e444a;
  --color-scheme-7-border: #3a6b74;
  --color-scheme-7-accent: #e0f9fd;

  /* Color Scheme 8 - Dark Teal */
  --color-scheme-8-background: #1e444a;
  --color-scheme-8-text: #ffffff;
  --color-scheme-8-foreground: #295a63;
  --color-scheme-8-border: #2a5058;
  --color-scheme-8-accent: #e0f9fd;

  /* ========================================
     SPACING
     ======================================== */

  --spacing-tiny: 4px;
  --spacing-xxsmall: 8px;
  --spacing-xsmall: 16px;
  --spacing-small: 24px;
  --spacing-medium: 32px;
  --spacing-large: 48px;
  --spacing-xlarge: 64px;
  --spacing-xxlarge: 80px;
  --spacing-huge: 96px;
  --spacing-xhuge: 128px;
  --spacing-xxhuge: 160px;

  /* Section Padding */
  --padding-section-small: 48px;
  --padding-section-medium: 80px;
  --padding-section-large: 112px;

  /* Global Padding (horizontal page margin) */
  --padding-global: 5%;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-xxsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --shadow-small: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-large: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
  --shadow-xlarge: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
  --shadow-xxlarge: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);

  /* ========================================
     CONTAINERS
     ======================================== */

  --container-small: 768px;
  --container-medium: 1024px;
  --container-large: 1280px;

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  --font-heading: 'Spectral', serif;
  --font-body: 'Inter', sans-serif;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ========================================
   COLOR SCHEME UTILITY CLASSES
   ======================================== */

.color-scheme-1 {
  background-color: var(--color-scheme-1-background);
  color: var(--color-scheme-1-text);
}

.color-scheme-2 {
  background-color: var(--color-scheme-2-background);
  color: var(--color-scheme-2-text);
}

.color-scheme-3 {
  background-color: var(--color-scheme-3-background);
  color: var(--color-scheme-3-text);
}

.color-scheme-4 {
  background-color: var(--color-scheme-4-background);
  color: var(--color-scheme-4-text);
}

.color-scheme-5 {
  background-color: var(--color-scheme-5-background);
  color: var(--color-scheme-5-text);
}

.color-scheme-6 {
  background-color: var(--color-scheme-6-background);
  color: var(--color-scheme-6-text);
}

.color-scheme-7 {
  background-color: var(--color-scheme-7-background);
  color: var(--color-scheme-7-text);
}

.color-scheme-8 {
  background-color: var(--color-scheme-8-background);
  color: var(--color-scheme-8-text);
}