/**
 * TXL GEN4 — Design System Tokens (Unifié)
 * Source unique de vérité pour toutes les variables CSS
 * Couleurs en oklch pour uniformité perceptuelle
 * Remplace : modern-ui.css variables, base-custom.css, design-system/tokens.css
 */

/* Déclaration d'ordre des layers — doit être la première @layer du projet */
@layer tokens, reset, animations, components, utilities;

@layer tokens {
  :root {
    /* =============================================
       COULEURS — oklch(lightness chroma hue)
       ============================================= */

    /* Primaire — bleu TXL unique */
    --txl-primary-50:  oklch(97% 0.03 264);
    --txl-primary-100: oklch(93% 0.06 264);
    --txl-primary-200: oklch(86% 0.10 264);
    --txl-primary-300: oklch(76% 0.15 264);
    --txl-primary-400: oklch(65% 0.19 264);
    --txl-primary:     oklch(55% 0.22 264);   /* base — remplace les 4 bleus */
    --txl-primary-600: oklch(50% 0.24 264);
    --txl-primary-700: oklch(45% 0.22 264);
    --txl-primary-800: oklch(38% 0.18 264);
    --txl-primary-900: oklch(30% 0.14 264);

    /* Gradient hero (remplace --gradient-hero hardcodé) */
    --txl-gradient-hero: linear-gradient(135deg, oklch(55% 0.22 264), oklch(55% 0.22 290));
    --txl-gradient-subtle: linear-gradient(135deg, oklch(97% 0.03 264), oklch(97% 0.03 290));

    /* Sémantique */
    --txl-success:  oklch(55% 0.18 145);
    --txl-warning:  oklch(72% 0.18 75);
    --txl-danger:   oklch(55% 0.22 25);
    --txl-info:     oklch(60% 0.15 230);

    /* Surfaces */
    --txl-bg:              oklch(99% 0 0);
    --txl-surface:         oklch(100% 0 0);
    --txl-surface-raised:  oklch(98% 0 0);
    --txl-surface-overlay: oklch(0% 0 0 / 0.4);

    /* Texte */
    --txl-text:           oklch(18% 0 0);
    --txl-text-secondary: oklch(42% 0 0);
    --txl-text-muted:     oklch(62% 0 0);
    --txl-text-disabled:  oklch(72% 0 0);
    --txl-text-inverse:   oklch(100% 0 0);
    --txl-text-on-primary:oklch(100% 0 0);

    /* Bordures */
    --txl-border:       oklch(88% 0 0);
    --txl-border-light: oklch(93% 0 0);
    --txl-border-dark:  oklch(78% 0 0);

    /* =============================================
       TYPOGRAPHIE
       ============================================= */

    --txl-font:      'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --txl-font-mono: 'JetBrains Mono Variable', 'Fira Code', 'Courier New', monospace;

    /* Tailles fluides */
    --txl-text-xs:   clamp(0.70rem, 0.80vw, 0.75rem);
    --txl-text-sm:   clamp(0.80rem, 0.90vw, 0.875rem);
    --txl-text-base: clamp(0.90rem, 1.00vw, 1rem);
    --txl-text-lg:   clamp(1.00rem, 1.20vw, 1.125rem);
    --txl-text-xl:   clamp(1.10rem, 1.50vw, 1.25rem);
    --txl-text-2xl:  clamp(1.30rem, 2.00vw, 1.5rem);
    --txl-text-3xl:  clamp(1.60rem, 2.50vw, 1.875rem);
    --txl-text-4xl:  clamp(2.00rem, 3.00vw, 2.25rem);
    --txl-text-5xl:  clamp(2.50rem, 4.00vw, 3rem);

    --txl-weight-normal:   400;
    --txl-weight-medium:   500;
    --txl-weight-semibold: 600;
    --txl-weight-bold:     700;
    --txl-weight-extrabold:800;

    --txl-line-tight:   1.25;
    --txl-line-snug:    1.375;
    --txl-line-normal:  1.5;
    --txl-line-relaxed: 1.625;

    /* =============================================
       ESPACEMENT (scale 4px)
       ============================================= */

    --txl-space-1:  0.25rem;   /* 4px */
    --txl-space-2:  0.5rem;    /* 8px */
    --txl-space-3:  0.75rem;   /* 12px */
    --txl-space-4:  1rem;      /* 16px */
    --txl-space-5:  1.25rem;   /* 20px */
    --txl-space-6:  1.5rem;    /* 24px */
    --txl-space-8:  2rem;      /* 32px */
    --txl-space-10: 2.5rem;    /* 40px */
    --txl-space-12: 3rem;      /* 48px */
    --txl-space-16: 4rem;      /* 64px */
    --txl-space-20: 5rem;      /* 80px */
    --txl-space-24: 6rem;      /* 96px */

    /* =============================================
       RAYONS
       ============================================= */

    --txl-radius-sm:   0.375rem;  /* 6px */
    --txl-radius:      0.5rem;    /* 8px */
    --txl-radius-md:   0.75rem;   /* 12px */
    --txl-radius-lg:   1rem;      /* 16px */
    --txl-radius-xl:   1.5rem;    /* 24px */
    --txl-radius-full: 9999px;

    /* =============================================
       OMBRES
       ============================================= */

    --txl-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.05);
    --txl-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.10), 0 1px 2px oklch(0% 0 0 / 0.06);
    --txl-shadow:    0 4px 6px oklch(0% 0 0 / 0.10), 0 2px 4px oklch(0% 0 0 / 0.06);
    --txl-shadow-md: 0 10px 15px oklch(0% 0 0 / 0.10), 0 4px 6px oklch(0% 0 0 / 0.05);
    --txl-shadow-lg: 0 20px 25px oklch(0% 0 0 / 0.10), 0 8px 10px oklch(0% 0 0 / 0.04);
    --txl-shadow-xl: 0 25px 50px oklch(0% 0 0 / 0.20);

    /* =============================================
       TRANSITIONS & ANIMATIONS
       ============================================= */

    --txl-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --txl-ease-in:   cubic-bezier(0.4, 0, 1, 1);
    --txl-ease-out:  cubic-bezier(0, 0, 0.2, 1);
    --txl-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    --txl-duration-fast:   150ms;
    --txl-duration:        250ms;
    --txl-duration-slow:   400ms;
    --txl-duration-slower: 600ms;

    /* =============================================
       Z-INDEX
       ============================================= */

    --txl-z-below:          -1;
    --txl-z-base:            0;
    --txl-z-raised:         10;
    --txl-z-dropdown:     1000;
    --txl-z-sticky:       1020;
    --txl-z-fixed:        1030;
    --txl-z-backdrop:     1040;
    --txl-z-modal:        1050;
    --txl-z-popover:      1060;
    --txl-z-tooltip:      1070;
    --txl-z-notification: 9999;

    /* =============================================
       COMPOSANTS — NAVBAR
       ============================================= */

    --txl-navbar-height:   4.375rem;  /* 70px */
    --txl-navbar-bg:       oklch(100% 0 0 / 0.95);
    --txl-navbar-shadow:   0 2px 20px oklch(0% 0 0 / 0.08);

    /* =============================================
       FOCUS VISIBLE (WCAG AA)
       ============================================= */

    --txl-focus-ring:        0 0 0 3px oklch(55% 0.22 264 / 0.45);
    --txl-focus-ring-offset: 2px;
  }

  /* =============================================
     DARK MODE
     ============================================= */

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --txl-bg:              oklch(14% 0.01 264);
      --txl-surface:         oklch(19% 0.01 264);
      --txl-surface-raised:  oklch(24% 0.01 264);
      --txl-text:            oklch(92% 0 0);
      --txl-text-secondary:  oklch(70% 0 0);
      --txl-text-muted:      oklch(55% 0 0);
      --txl-text-disabled:   oklch(42% 0 0);
      --txl-border:          oklch(30% 0 0);
      --txl-border-light:    oklch(25% 0 0);
      --txl-border-dark:     oklch(38% 0 0);
      --txl-navbar-bg:       oklch(19% 0.01 264 / 0.95);
      --txl-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.30);
      --txl-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.40);
      --txl-shadow:    0 4px 6px oklch(0% 0 0 / 0.40);
      --txl-shadow-md: 0 10px 15px oklch(0% 0 0 / 0.40);
      --txl-shadow-lg: 0 20px 25px oklch(0% 0 0 / 0.40);
    }
  }

  [data-theme="dark"] {
    --txl-bg:              oklch(14% 0.01 264);
    --txl-surface:         oklch(19% 0.01 264);
    --txl-surface-raised:  oklch(24% 0.01 264);
    --txl-text:            oklch(92% 0 0);
    --txl-text-secondary:  oklch(70% 0 0);
    --txl-text-muted:      oklch(55% 0 0);
    --txl-text-disabled:   oklch(42% 0 0);
    --txl-border:          oklch(30% 0 0);
    --txl-border-light:    oklch(25% 0 0);
    --txl-border-dark:     oklch(38% 0 0);
    --txl-navbar-bg:       oklch(19% 0.01 264 / 0.95);
    --txl-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.30);
    --txl-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.40);
    --txl-shadow:    0 4px 6px oklch(0% 0 0 / 0.40);
    --txl-shadow-md: 0 10px 15px oklch(0% 0 0 / 0.40);
    --txl-shadow-lg: 0 20px 25px oklch(0% 0 0 / 0.40);
  }

  /* =============================================
     PERSONNALISATION TENANT
     ============================================= */

  /* Les tenants surchargent uniquement ces variables */
  [data-tenant-theme] {
    /* --txl-primary: oklch(55% 0.22 120);  exemple: vert */
    /* --txl-font: 'Poppins', sans-serif; */
    /* --txl-radius: 0.25rem;  exemple: angles vifs */
  }
}