/* ==========================================================================
   ARC SITE - DESIGN SYSTEM TOKENS (tokens.css)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     COLOR SYSTEM
     ------------------------------------------------------------------------ */
  /* Primary & Secondary Brand Colors */
  --color-primary: #87948B;
  --color-secondary: #B89D78;
  --color-accent: #B89D78;
  --color-gold: #B89D78;

  /* Neutral Scale */
  --color-charcoal: #2F3331;
  --color-soft-gray: #D8DAD6;
  --color-light-gray: #ECEDE9;

  /* Background Colors (Main background MUST be PURE WHITE) */
  --color-background: #FFFFFF;
  --color-off-white: #F8F6F1;
  --color-ivory: #F1ECE3;
  --color-dark: #252826;

  /* System Feedback Colors */
  --color-success: #4F8A5B;
  --color-warning: #C89A2B;
  --color-error: #C84D4D;
  --color-info: #5A84A2;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY TOKENS
     ------------------------------------------------------------------------ */
  --font-family-base: 'Almarai', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ------------------------------------------------------------------------
     SPACING TOKENS (Pixel & Rem scale)
     ------------------------------------------------------------------------ */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* ------------------------------------------------------------------------
     BORDER RADIUS TOKENS
     ------------------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ------------------------------------------------------------------------
     BORDER THICKNESS & STROKES
     ------------------------------------------------------------------------ */
  --border-thin: 1px solid var(--color-soft-gray);
  --border-subtle: 1px solid rgba(216, 218, 214, 0.5);

  /* ------------------------------------------------------------------------
     SHADOWS (Light Luxury Soft Style)
     ------------------------------------------------------------------------ */
  --shadow-subtle: 0 4px 20px rgba(47, 51, 49, 0.04);
  --shadow-soft: 0 10px 30px rgba(47, 51, 49, 0.06);
  --shadow-float: 0 20px 40px rgba(47, 51, 49, 0.08);

  /* ------------------------------------------------------------------------
     GLASS EFFECTS & TRANSITIONS
     ------------------------------------------------------------------------ */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(12px);
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}