/* ============================================================
   WORKPLACE BY IRSA — DESIGN TOKENS
   Version D: Pupila-inspired / Bold Condensed Editorial — LIGHT
   ============================================================
   Same massive compressed typography and layout as V-C,
   but with a warm cream/ivory light palette. Dark hero stays
   cinematic, then transitions to light sections.
   ============================================================ */

/* — Google Fonts ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700&display=swap');

/* — Self-hosted: Seriguela Display (headline font from pupila.ai) */
@font-face {
  font-family: 'Seriguela';
  src: url('../fonts/SeriguelaDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. COLOR TOKENS
   ============================================================ */
:root {

  /* --- Core Palette --------------------------------------- */
  --color-black:          #0A0A0A;
  --color-black-rich:     #050505;
  --color-gray-950:       #111111;
  --color-gray-900:       #1A1A1A;
  --color-gray-800:       #252525;
  --color-gray-700:       #333333;
  --color-gray-600:       #555555;
  --color-gray-500:       #777777;
  --color-gray-400:       #999999;
  --color-gray-300:       #BBBBBB;
  --color-gray-200:       #D4D4D4;
  --color-gray-100:       #EBEBEB;
  --color-gray-50:        #F5F5F5;
  --color-white:          #FFFFFF;

  /* --- Brand Accents ------------------------------------- */
  --color-gold:           #A8893E;
  --color-gold-light:     #C4A265;
  --color-gold-dark:      #8A6F2E;
  --color-terracotta:     #C4543A;
  --color-terracotta-light:#D6735E;
  --color-terracotta-dark: #A23D27;

  /* --- Light Theme Palette ------------------------------- */
  --color-cream:          #FAF8F5;
  --color-ivory:          #F3F0EB;
  --color-warm-50:        #EDE9E3;
  --color-warm-100:       #DDD8D0;
  --color-warm-200:       #C5BFB5;

  /* --- Semantic: Backgrounds ----------------------------- */
  --bg-primary:           var(--color-cream);
  --bg-elevated:          var(--color-white);
  --bg-surface:           var(--color-ivory);
  --bg-surface-alt:       var(--color-warm-50);
  --bg-inverse:           var(--color-black);
  --bg-accent:            var(--color-gold);
  --bg-statement:         var(--color-black);
  --bg-hero-overlay:      rgba(10, 10, 10, 0.65);

  /* --- Semantic: Text ------------------------------------ */
  --text-primary:         var(--color-black);
  --text-secondary:       var(--color-gray-600);
  --text-tertiary:        var(--color-gray-400);
  --text-inverse:         var(--color-white);
  --text-accent:          var(--color-gold);
  --text-on-accent:       var(--color-white);
  --text-on-statement:    var(--color-white);

  /* --- Semantic: Borders --------------------------------- */
  --border-subtle:        rgba(10, 10, 10, 0.06);
  --border-default:       rgba(10, 10, 10, 0.12);
  --border-strong:        rgba(10, 10, 10, 0.20);
  --border-accent:        var(--color-gold);
  --border-inverse:       rgba(255, 255, 255, 0.15);

  /* --- Gradients ----------------------------------------- */
  --gradient-dark-fade:   linear-gradient(180deg, var(--color-cream) 0%, var(--color-ivory) 100%);
  --gradient-surface:     linear-gradient(180deg, var(--color-ivory) 0%, var(--color-cream) 100%);
  --gradient-gold:        linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold-light) 100%);
  --gradient-statement:   linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-light) 50%, var(--color-gold) 100%);
  --gradient-hero-overlay:linear-gradient(180deg, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.35) 45%, rgba(10,10,10,0.65) 100%);
  --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-cream) 100%);


  /* ============================================================
     2. TYPOGRAPHY TOKENS
     ============================================================ */

  /* --- Font Families ------------------------------------- */
  --font-display:         'Seriguela', 'Playfair Display', 'Georgia', serif;
  --font-body:            'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:              'Montserrat', 'Helvetica Neue', sans-serif;

  /* --- Display Sizes (Condensed Uppercase Headlines) ----- */
  --text-display-mega:    clamp(4.5rem, 10vw + 1rem, 9rem);      /* 72–144px  Hero / manifesto */
  --text-display-xl:      clamp(3.5rem, 8vw + 0.5rem, 7.5rem);   /* 56–120px  Section hero */
  --text-display-lg:      clamp(2.75rem, 6vw + 0.5rem, 5.5rem);  /* 44–88px   Section titles */
  --text-display-md:      clamp(2rem, 4vw + 0.5rem, 3.75rem);    /* 32–60px   Sub-sections */
  --text-display-sm:      clamp(1.5rem, 3vw + 0.25rem, 2.5rem);  /* 24–40px   Cards / callouts */

  /* --- Body Sizes ---------------------------------------- */
  --text-xl:              clamp(1.25rem, 1.5vw + 0.25rem, 1.5rem);   /* 20–24px */
  --text-lg:              clamp(1.125rem, 1.2vw + 0.2rem, 1.25rem);  /* 18–20px */
  --text-base:            clamp(0.9375rem, 1vw + 0.125rem, 1.0625rem);/* 15–17px */
  --text-sm:              clamp(0.8125rem, 0.8vw + 0.1rem, 0.875rem);/* 13–14px */
  --text-xs:              clamp(0.6875rem, 0.7vw + 0.1rem, 0.75rem); /* 11–12px */

  /* --- Stat / Counter Sizes ------------------------------ */
  --text-stat:            clamp(3rem, 7vw + 1rem, 6.5rem);    /* 48–104px  Big stat numbers */

  /* --- Font Weights -------------------------------------- */
  --weight-light:         300;
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;
  --weight-extrabold:     800;

  /* --- Line Heights -------------------------------------- */
  --leading-none:         0.9;     /* Display / condensed headlines */
  --leading-tight:        1.0;     /* Large headings */
  --leading-snug:         1.15;    /* Sub-headings */
  --leading-normal:       1.5;     /* Body copy */
  --leading-relaxed:      1.65;    /* Long-form / small text */

  /* --- Letter Spacing ------------------------------------ */
  --tracking-compressed:  -0.02em; /* Condensed display */
  --tracking-tight:       -0.01em; /* Headings */
  --tracking-normal:      0;       /* Body */
  --tracking-wide:        0.05em;  /* Uppercase labels */
  --tracking-wider:       0.1em;   /* Pill badges / tags */
  --tracking-widest:      0.2em;   /* Eyebrow / overlines */


  /* ============================================================
     3. SPACING SCALE (8px base)
     ============================================================ */
  --space-1:              0.25rem;   /*  4px */
  --space-2:              0.5rem;    /*  8px */
  --space-3:              0.75rem;   /* 12px */
  --space-4:              1rem;      /* 16px */
  --space-5:              1.25rem;   /* 20px */
  --space-6:              1.5rem;    /* 24px */
  --space-8:              2rem;      /* 32px */
  --space-10:             2.5rem;    /* 40px */
  --space-12:             3rem;      /* 48px */
  --space-16:             4rem;      /* 64px */
  --space-20:             5rem;      /* 80px */
  --space-24:             6rem;      /* 96px */
  --space-32:             8rem;      /* 128px */
  --space-40:             10rem;     /* 160px */
  --space-48:             12rem;     /* 192px */

  /* --- Section Padding (responsive) ---------------------- */
  --section-py:           clamp(4rem, 10vh, 8rem);
  --section-py-lg:        clamp(5rem, 14vh, 12rem);
  --section-px:           clamp(1.25rem, 5vw, 4rem);

  /* --- Container ----------------------------------------- */
  --container-max:        1400px;
  --container-narrow:     960px;
  --container-wide:       1600px;


  /* ============================================================
     4. BORDER RADIUS
     ============================================================ */
  --radius-none:          0;
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-2xl:           24px;
  --radius-full:          9999px;


  /* ============================================================
     5. SHADOWS
     ============================================================ */
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow-gold:     0 0 40px rgba(168, 137, 62, 0.12);
  --shadow-glow-terracotta:0 0 40px rgba(196, 84, 58, 0.08);
  --shadow-card:          0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:    0 8px 40px rgba(0, 0, 0, 0.10);


  /* ============================================================
     6. TRANSITIONS & ANIMATION TIMING
     ============================================================ */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:        150ms;
  --duration-normal:      300ms;
  --duration-slow:        500ms;
  --duration-reveal:      800ms;
  --duration-stagger:     100ms;

  --transition-base:      var(--duration-normal) var(--ease-out);
  --transition-slow:      var(--duration-slow) var(--ease-out);
  --transition-reveal:    var(--duration-reveal) var(--ease-out);

  /* --- Marquee Speeds ------------------------------------ */
  --marquee-speed-fast:   30s;
  --marquee-speed-normal: 50s;
  --marquee-speed-slow:   80s;


  /* ============================================================
     7. GRID & BREAKPOINTS
     ============================================================ */
  --grid-columns:         12;
  --grid-gap:             clamp(1rem, 2vw, 2rem);
  --grid-gap-sm:          clamp(0.5rem, 1vw, 1rem);

  /* Breakpoints (for reference — use in @media queries)
     --bp-sm:   480px
     --bp-md:   768px
     --bp-lg:   1024px
     --bp-xl:   1280px
     --bp-2xl:  1536px
     --bp-3xl:  1920px
  */


  /* ============================================================
     8. Z-INDEX SCALE
     ============================================================ */
  --z-base:               1;
  --z-above:              10;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;
  --z-nav:                500;
  --z-toast:              600;
  --z-max:                9999;


  /* ============================================================
     9. COMPONENT TOKENS
     ============================================================ */

  /* --- Buttons (Ghost style) ----------------------------- */
  --btn-padding-x:        var(--space-8);
  --btn-padding-y:        var(--space-4);
  --btn-border-width:     1px;
  --btn-radius:           var(--radius-full);
  --btn-font-size:        var(--text-sm);
  --btn-font-weight:      var(--weight-semibold);
  --btn-letter-spacing:   var(--tracking-wider);
  --btn-transition:       all var(--transition-base);

  /* --- Pill / Tag Badges --------------------------------- */
  --pill-padding-x:       var(--space-5);
  --pill-padding-y:       var(--space-2);
  --pill-radius:          var(--radius-full);
  --pill-border-width:    1px;
  --pill-font-size:       var(--text-xs);
  --pill-letter-spacing:  var(--tracking-widest);

  /* --- Cards --------------------------------------------- */
  --card-radius:          var(--radius-lg);
  --card-padding:         var(--space-8);
  --card-bg:              var(--bg-surface);
  --card-border:          var(--border-subtle);

  /* --- Navigation ---------------------------------------- */
  --nav-height:           clamp(3.5rem, 5vh, 4.5rem);
  --nav-bg:               rgba(250, 248, 245, 0.92);
  --nav-backdrop:         blur(20px) saturate(180%);
}


/* ============================================================
   10. KEYFRAME ANIMATIONS
   ============================================================ */

/* --- Marquee (continuous horizontal scroll) -------------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-scroll-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* --- Scroll Reveal -------------------------------------- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Stat Counter Pulse --------------------------------- */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* --- Subtle Background Drift (hero) --------------------- */
@keyframes drift {
  0%   { transform: scale(1.05) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -0.5%); }
  100% { transform: scale(1.05) translate(0, 0); }
}


/* ============================================================
   11. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-reveal:  0ms;
    --marquee-speed-fast:   0s;
    --marquee-speed-normal: 0s;
    --marquee-speed-slow:   0s;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}