/* ============================================================================
   WTS — World Textile Sourcing
   Design System Tokens
   ----------------------------------------------------------------------------
   Source of truth for colors, typography, spacing, radii, shadows.
   Drop this file in your project and consume the variables in your CSS.
   ============================================================================ */

@font-face {
  font-family: "Graphik";
  src: url("/fonts/Graphik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("/fonts/Graphik-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Corp Wide";
  src: url("/fonts/PPNeueCorp-WideUltralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Corp Compact";
  src: url("/fonts/PPNeueCorp-CompactUltralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Corp Compact";
  src: url("/fonts/PPNeueCorp-CompactMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ───── COLORS — Brand Palette ───── */
  --wts-white:        #FFFFFF;   /* Base / surface */
  --wts-beige:        #F4F0E5;   /* Soft canvas — Pantone 7527 */
  --wts-celeste:      #CDDEE9;   /* Accent — Pantone 545 U / 290 C */
  --wts-azul:         #162350;   /* Primary navy — Pantone 2757 U / 4153 C */
  --wts-gris:         #232526;   /* Text / charcoal — Pantone 7540 C */

  /* ───── COLORS — Semantic Aliases ───── */
  --color-bg:              var(--wts-white);
  --color-bg-soft:         var(--wts-beige);
  --color-bg-accent:       var(--wts-celeste);
  --color-bg-inverse:      var(--wts-azul);

  --color-text:            var(--wts-gris);
  --color-text-muted:      #6B6E72;          /* derived */
  --color-text-inverse:    var(--wts-white);
  --color-text-brand:      var(--wts-azul);

  --color-border:          #E5E1D6;          /* derived from beige */
  --color-border-strong:   var(--wts-gris);

  --color-primary:         var(--wts-azul);
  --color-primary-hover:   #0F1A3D;
  --color-primary-active:  #0A1330;

  --color-accent:          var(--wts-celeste);

  /* ───── TYPOGRAPHY — Families ───── */
  --font-display:          "PP Neue Corp Wide", "Times New Roman", serif;
  --font-display-compact:  "PP Neue Corp Compact", "Times New Roman", serif;
  --font-body:             "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ───── TYPOGRAPHY — Scale ───── */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   96px;
  --text-7xl:   128px;

  /* ───── TYPOGRAPHY — Line Heights ───── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ───── TYPOGRAPHY — Letter Spacing ───── */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.24em;

  /* ───── SPACING — 4px grid ───── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ───── BORDER RADIUS ───── */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* ───── BORDERS ───── */
  --border-width-hairline: 0.5px;
  --border-width-thin:     1px;
  --border-width-medium:   2px;

  /* ───── SHADOWS ───── */
  --shadow-xs: 0 1px 2px 0 rgba(22, 35, 80, 0.04);
  --shadow-sm: 0 2px 4px -1px rgba(22, 35, 80, 0.06), 0 1px 2px -1px rgba(22, 35, 80, 0.04);
  --shadow-md: 0 6px 12px -2px rgba(22, 35, 80, 0.08), 0 3px 6px -2px rgba(22, 35, 80, 0.05);
  --shadow-lg: 0 16px 32px -8px rgba(22, 35, 80, 0.10), 0 6px 12px -4px rgba(22, 35, 80, 0.06);
  --shadow-xl: 0 32px 64px -16px rgba(22, 35, 80, 0.14);

  /* ───── LAYOUT ───── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;

  /* ───── MOTION — Easings ───── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* gentle overshoot */
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.27, 1.55); /* soft bounce */
  --ease-elastic:  cubic-bezier(0.5, 1.8, 0.5, 0.8);     /* elastic snap */
  --ease-linear:   linear;                                /* for ambient loops */

  /* ───── MOTION — Durations ───── */
  --duration-fast:        150ms;
  --duration-normal:      250ms;
  --duration-slow:        400ms;
  --duration-deliberate:  700ms;   /* reveals, scene transitions */
  --duration-ambient:     14s;     /* ambient loops (rotating isotipo, breathing) */

  /* ───── 3D — Perspective & Transforms ───── */
  --perspective-near:  600px;    /* close, dramatic depth (tilt cards) */
  --perspective-mid:   1200px;   /* default — natural depth */
  --perspective-far:   2400px;   /* subtle, almost flat */

  --tilt-amount:       8deg;     /* default tilt for hover-cards */
  --tilt-amount-soft:  4deg;     /* subtle */

  /* ───── MOTION — Reduced Motion respect ───── */
  /* Components should wrap animations in @media (prefers-reduced-motion: no-preference) */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:       0ms;
    --duration-normal:     0ms;
    --duration-slow:       0ms;
    --duration-deliberate: 0ms;
    --duration-ambient:    0ms;
  }
}