/* ============================================================
   Weventis Design Tokens
   ------------------------------------------------------------
   Two layers:
     1. Raw tokens (--raw-*): Figma-defined values. Fixed.
     2. Semantic tokens (--color-*, --font-*, etc.): used by
        all components. Overridable per instance via the
        branding system (see core/branding.php).
   ============================================================ */

:root {

  /* ===== RAW COLOR TOKENS (Figma) ===== */
  --raw-turquoise:     #0cdacc;
  --raw-purple:        #490f73;
  --raw-purple-soft:   #573895;
  --raw-cream:         #f9f7eb;
  --raw-white:         #ffffff;
  --raw-black:         #1a1a1a;
  --raw-text:          #2a2a2a;
  --raw-text-muted:    #6c6c6c;
  --raw-text-subtle:   #999999;
  --raw-border:        #e6e2d4;
  --raw-decoration:    #d8d6c7;
  --raw-success:       #28a745;
  --raw-danger:        #dc3545;


  /* ===== SEMANTIC COLOR TOKENS (overridable for branding) ===== */
  --color-primary:           var(--raw-purple);
  --color-primary-soft:      var(--raw-purple-soft);
  --color-accent:            var(--raw-turquoise);
  --color-bg:                var(--raw-cream);
  --color-surface:           var(--raw-white);
  --color-surface-alt:       var(--raw-cream);
  --color-text:              var(--raw-text);
  --color-text-muted:        var(--raw-text-muted);
  --color-text-subtle:       var(--raw-text-subtle);
  --color-text-on-primary:   var(--raw-white);
  --color-text-on-accent:    var(--raw-white);
  --color-border:            var(--raw-border);
  --color-decoration:        var(--raw-decoration);
  --color-success:           var(--raw-success);
  --color-danger:            var(--raw-danger);


  /* ===== GRADIENT (overridable) ===== */
  --gradient-start:    var(--raw-turquoise);
  --gradient-end:      var(--raw-purple-soft);
  --gradient-angle:    95deg;
  --gradient-primary:  linear-gradient(var(--gradient-angle), var(--gradient-start) 0%, var(--gradient-end) 100%);


  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Boldonse', 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display-1: clamp(2.75rem, 6vw, 5.75rem);   /* up to 92px */
  --fs-display-2: clamp(2.25rem, 5vw, 4.5rem);    /* up to 72px */
  --fs-display-3: clamp(2rem,    4.5vw, 3.875rem);/* up to 62px */
  --fs-display-4: clamp(1.75rem, 3.5vw, 3.125rem);/* up to 50px */
  --fs-h1:        clamp(1.625rem, 2.5vw, 2.3125rem); /* up to 37px */
  --fs-h2:        1.75rem;     /* 28px */
  --fs-h3:        1.375rem;    /* 22px */
  --fs-h4:        1.125rem;    /* 18px */
  --fs-body-lg:   1.125rem;    /* 18px */
  --fs-body:      1rem;        /* 16px */
  --fs-body-sm:   0.875rem;    /* 14px */
  --fs-xs:        0.75rem;     /* 12px */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-display: -0.01em;
  --ls-body:    0;


  /* ===== SPACING ===== */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 6rem;      /* 96px */
  --space-16: 8rem;      /* 128px */


  /* ===== LAYOUT ===== */
  --container-max:  1280px;
  --container-px:   clamp(1rem, 4vw, 2.5rem);
  --nav-height:     72px;
  --banner-height:  44px;


  /* ===== RADII ===== */
  --radius-sm:    0.5rem;    /* 8px  */
  --radius-md:    1rem;      /* 16px */
  --radius-lg:    1.5rem;    /* 24px */
  --radius-xl:    2rem;      /* 32px */
  --radius-2xl:   2.5rem;    /* 40px */
  --radius-pill:  999px;


  /* ===== 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 12px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 48px rgba(0,0,0,0.16);


  /* ===== MOTION ===== */
  --transition-fast: 120ms ease;
  --transition:      200ms ease;
  --transition-slow: 360ms ease;


  /* ===== BRANDING ASSETS (overridable) ===== */
  --logo-url:      url('/public/img/logo.svg');
  --logo-height:   42px;
  --favicon-url:   url('/public/img/favicon.svg');
}