/* ============================================ */
/*  CSS VARIABLES & DESIGN TOKENS               */
/*  Paleta de diseño del sitio Guebel A+D       */
/* ============================================ */

:root {
  /* Enable automatic color scheme adaptation */
  color-scheme: light dark;

  /* ------------------------------------------ */
  /*  COLORS - Sketch / Artisanal Palette       */
  /*  Theme: LIGHT (default)                    */
  /* ------------------------------------------ */

  /* Backgrounds */
  --color-bg-primary: hsl(40 2 97);
  /* Paper Creme */
  --color-bg-secondary: hsl(40 0 99);
  /* Off-white */
  --color-bg-dark: hsl(220 5 5);
  /* Deep Charcoal */

  /* Text Colors */
  --color-text-primary: hsl(220 5 10);
  /* Charcoal Gray */
  --color-text-secondary: hsl(220 5 45);
  /* Medium Gray */
  --color-text-on-dark: hsl(40 5 95);

  /* Accent & Contrast */
  --color-accent: hsl(210 10 45);
  /* Architectural Blue */
  --color-accent-wash: hsl(210 20 50 / 15%);
  /* Sketch Wash */
  --color-contrast: hsl(30 10 45);
  /* Opposite Hue (30°) */
  --color-line: hsl(220 5 25);
  /* Graphite line */

  /* Ultra contrast (for hover/focus states) */
  --fondo-ultra: white;
  --texto-ultra: black;

  /* ------------------------------------------ */
  /*  TYPOGRAPHY                                */
  /* ------------------------------------------ */

  --font-display: 'Switzer', sans-serif;
  --font-headline: 'Switzer', sans-serif;
  --font-body: 'Switzer', sans-serif;
  --font-condensed: 'Archivo', sans-serif;
  --font-alternative: 'Work Sans', sans-serif;

  --txt-weight: 300;
  /* Dynamic Font Weight (controlled by scroll) */
  --title-weight: 300;
  /* Will be updated by JS: 300 → 600 */

  /* ------------------------------------------ */
  /*  SPACING SCALE                             */
  /* ------------------------------------------ */

  --space-unit: clamp(0.375rem, 0.3291rem + 0.2041vw, 0.5rem);

  --space-xs: calc(var(--space-unit) * 0.5);
  /* 4px */
  --space-sm: var(--space-unit);
  /* 8px */
  --space-md: calc(var(--space-unit) * 2);
  /* 16px */
  --space-lg: calc(var(--space-unit) * 4);
  /* 32px */
  --space-xl: calc(var(--space-unit) * 8);
  /* 64px */
  --space-2xl: calc(var(--space-unit) * 12);
  /* 96px */
  --space-3xl: calc(var(--space-unit) * 18);
  /* 144px */
  --space-4xl: calc(var(--space-unit) * 24);
  /* 192px */

  /* ------------------------------------------ */
  /*  LAYOUT                                    */
  /* ------------------------------------------ */

  --container-max-width: 1280px;
  --container-padding: var(--space-lg);

  /* ------------------------------------------ */
  /*  TEXTURES                                  */
  /* ------------------------------------------ */

  --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  /* ------------------------------------------ */
  /*  TRANSITIONS & EASINGS                     */
  /* ------------------------------------------ */

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-sm: 0.3s;
  --duration-md: 0.6s;
  --duration-lg: 0.9s;
  --duration-xl: 1.2s;
}

/* ============================================ */
/*  DARK THEME                                  */
/*  Auto: when system prefers dark              */
/*  Manual: when data-theme="dark" is set       */
/* ============================================ */

/* Auto dark mode (system preference) - only if not forced to light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Backgrounds inverted */
    --color-bg-primary: hsl(220 5 5);
    --color-bg-secondary: hsl(220 5 10);
    --color-bg-dark: hsl(40 5 97);

    /* Text Colors inverted */
    --color-text-primary: hsl(40 5 95);
    --color-text-secondary: hsl(40 5 75);
    --color-text-on-dark: hsl(220 5 10);

    /* Accent & Contrast adjusted for dark */
    --color-accent: hsl(210 20 60);
    --color-accent-wash: hsl(210 30 50 / 20%);
    --color-contrast: hsl(30 20 60);
    --color-line: hsl(40 10 75);

    /* Ultra contrast inverted */
    --fondo-ultra: black;
    --texto-ultra: white;
  }
}

/* Manual dark mode (user preference via UI) */
:root[data-theme="dark"] {
  /* Backgrounds inverted */
  --color-bg-primary: hsl(220 5 5);
  --color-bg-secondary: hsl(220 5 10);
  --color-bg-dark: hsl(40 5 97);

  /* Text Colors inverted */
  --color-text-primary: hsl(40 5 95);
  --color-text-secondary: hsl(40 5 75);
  --color-text-on-dark: hsl(220 5 10);

  /* Accent & Contrast adjusted for dark */
  --color-accent: hsl(210 20 60);
  --color-accent-wash: hsl(210 30 50 / 20%);
  --color-contrast: hsl(30 20 60);
  --color-line: hsl(40 10 75);

  /* Ultra contrast inverted */
  --fondo-ultra: black;
  --texto-ultra: white;
}