/* ═══════════════════════════════════════════════════════════════
   4POCH — MASTER THEME
   /public/front-assets/css/theme.css

   ▸ Chanje FICHYE SA A sèlman pou modifye tout app la
   ▸ Tout paj yo dwe gen:
       <link rel="stylesheet" href="{{ asset('front-assets/css/theme.css') }}">
   ▸ Pa janm mete koule dirèkteman nan lòt CSS yo —
     toujou refere: var(--non-token)
═══════════════════════════════════════════════════════════════ */

:root {

  /* ══════════════════════════════════════════════════════════
     1. MARKA / BRAND — 4POCH BLEU
  ══════════════════════════════════════════════════════════ */
  --blue:          #1D22A6;
  --blue-dark:     #12167A;
  --blue-deeper:   #050718;
  --blue-light:    #DDE3FF;
  --blue-50:       #EEF2FF;

  /* Bleu siplemantè pou glow / gradient */
  --blue-soft:     #2563EB;
  --blue-sky:      #38BDF8;
  --blue-neon:     #00B7FF;

  /* ══════════════════════════════════════════════════════════
     2. AKSYON / ACCENT — BOUTON PRENSIPAL BLEU
  ══════════════════════════════════════════════════════════ */
  --accent:        #1D22A6;
  --accent-dark:   #12167A;
  --accent-light:  #3B5BFF;
  --accent-shadow: rgba(29, 34, 166, .35);

  /* Si ou bezwen ti touche orange/jòn pou dot oswa highlight espesyal */
  --orange:        #FF8A00;
  --orange-dark:   #D96B00;
  --orange-soft:   rgba(255, 138, 0, .14);

  /* ══════════════════════════════════════════════════════════
     3. STATI / STATUS
  ══════════════════════════════════════════════════════════ */
  --green:           #4ADE80;
  --green-text:      #6EE8A0;
  --green-text2:     #5CE492;
  --green-chart:     #22C55E;
  --green-chart-bg:  rgba(34, 197, 94, .10);
  --green-growth-bg: rgba(74, 222, 128, .08);

  --red:             #F87171;
  --red-dark:        #DC2626;
  --red-bg:          rgba(248, 113, 113, .10);

  --yellow:          #FBBF24;
  --yellow-light:    #FFF8D6;
  --yellow-dark:     #92680A;
  --yellow-bg:       rgba(251, 191, 36, .10);

  /* ══════════════════════════════════════════════════════════
     4. BAZE / NEUTRALS
  ══════════════════════════════════════════════════════════ */
  --black:    #050505;
  --white:    #F8FAFC;

  --gray-50:  #F8FAFC;
  --gray-100: #E5E7EB;
  --gray-200: #CBD5E1;
  --gray-300: #94A3B8;
  --gray-500: #64748B;
  --gray-700: #334155;
  --gray-900: #0F172A;

  /* ══════════════════════════════════════════════════════════
     5. GLASS / SIFAS BLAN TRANSPARANS
  ══════════════════════════════════════════════════════════ */
  --s-02: rgba(255,255,255,.02);
  --s-04: rgba(255,255,255,.04);
  --s-05: rgba(255,255,255,.05);
  --s-06: rgba(255,255,255,.06);
  --s-07: rgba(255,255,255,.07);
  --s-08: rgba(255,255,255,.08);
  --s-10: rgba(255,255,255,.10);
  --s-12: rgba(255,255,255,.12);
  --s-18: rgba(255,255,255,.18);
  --s-20: rgba(255,255,255,.20);
  --s-35: rgba(255,255,255,.35);

  /* Glass bleu transparans */
  --b-04: rgba(29, 34, 166, .04);
  --b-08: rgba(29, 34, 166, .08);
  --b-10: rgba(29, 34, 166, .10);
  --b-14: rgba(29, 34, 166, .14);
  --b-18: rgba(29, 34, 166, .18);
  --b-25: rgba(29, 34, 166, .25);
  --b-35: rgba(29, 34, 166, .35);
  --b-50: rgba(29, 34, 166, .50);

  /* ══════════════════════════════════════════════════════════
     6. TÈKS SOU FONSE
  ══════════════════════════════════════════════════════════ */
  --t-92: rgba(248,250,252,.92);
  --t-82: rgba(248,250,252,.82);
  --t-75: rgba(248,250,252,.75);
  --t-60: rgba(248,250,252,.60);
  --t-58: rgba(248,250,252,.58);
  --t-55: rgba(248,250,252,.55);
  --t-52: rgba(248,250,252,.52);
  --t-48: rgba(248,250,252,.48);
  --t-45: rgba(248,250,252,.45);
  --t-38: rgba(248,250,252,.38);
  --t-32: rgba(248,250,252,.32);

  /* ══════════════════════════════════════════════════════════
     7. AVATAR
  ══════════════════════════════════════════════════════════ */
  --avatar-top:    #1D22A6;
  --avatar-bot:    #050718;
  --avatar-ring-a: rgba(29, 34, 166, .55);
  --avatar-ring-b: rgba(56, 189, 248, .35);

  /* ══════════════════════════════════════════════════════════
     8. ELEMAN ESPESYAL
  ══════════════════════════════════════════════════════════ */
  --island-bg:  #020617;
  --dot-orange: #1D22A6;
  --dot-gray:   #475569;
  --page-bg:    #050718;

  --promo-card-a: #050718;
  --promo-card-b: #10156A;
  --promo-card-c: #1D22A6;

  /* ══════════════════════════════════════════════════════════
     9. HTG TAGLINE
  ══════════════════════════════════════════════════════════ */
  --htg-bg:     rgba(29, 34, 166, .12);
  --htg-border: rgba(29, 34, 166, .25);
  --htg-text:   #9DB1FF;

  /* ══════════════════════════════════════════════════════════
     10. MOBIL BG DEGRADE
  ══════════════════════════════════════════════════════════ */
  --mob-bg-1: #070A2A;
  --mob-bg-2: #06091F;
  --mob-bg-3: #050718;
  --mob-bg-4: #030512;
  --mob-bg-5: #01020A;

  --mob-r1: rgba(29, 34, 166, .22);
  --mob-r2: rgba(37, 99, 235, .14);
  --mob-r3: rgba(0, 183, 255, .08);
  --mob-r4: rgba(255, 255, 255, .03);

  /* ══════════════════════════════════════════════════════════
     11. DESKTOP BG DEGRADE
  ══════════════════════════════════════════════════════════ */
  --desk-top: #080B24;
  --desk-mid: #050718;
  --desk-bot: #02030C;

  --desk-r1:  rgba(29, 34, 166, .18);
  --desk-r2:  rgba(56, 189, 248, .07);
  --desk-sep: rgba(255,255,255,.06);

  --donut-inner: #050718;

  /* ══════════════════════════════════════════════════════════
     12. POPUP / FÒMILÈ
  ══════════════════════════════════════════════════════════ */
  --popup-backdrop: rgba(0, 0, 0, .78);
  --popup-bg:       #080B24;
  --popup-text:     #F8FAFC;
  --popup-muted:    #94A3B8;
  --popup-close-bg: rgba(255,255,255,.08);
  --popup-shadow:   rgba(0, 0, 0, .65);

  --input-border:   rgba(255,255,255,.12);
  --input-bg:       rgba(255,255,255,.06);
  --input-focus:    #1D22A6;
  --input-focus-bg: rgba(29, 34, 166, .10);

  --note-bg:        rgba(29, 34, 166, .10);
  --note-text:      #9DB1FF;
  --warn-bg:        rgba(251, 191, 36, .10);
  --warn-text:      #FBBF24;

  --btn-blue:       #1D22A6;
  --btn-red:        #1D22A6;
  --btn-green:      #22C55E;
  --btn-light-bg:   rgba(255,255,255,.08);
  --btn-light-txt:  #F8FAFC;

  /* ══════════════════════════════════════════════════════════
     13. SHADOW
  ══════════════════════════════════════════════════════════ */
  --shadow:          0 10px 35px rgba(0,0,0,.45);
  --shadow-blue:     0 14px 40px rgba(29,34,166,.35);
  --shadow-black-22: rgba(0,0,0,.40);
  --shadow-black-30: rgba(0,0,0,.60);
  --shadow-inset-sm: rgba(255,255,255,.05);

  /* ══════════════════════════════════════════════════════════
     14. RADIUS / LAYOUT
  ══════════════════════════════════════════════════════════ */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* ══════════════════════════════════════════════════════════
     15. TOKENS SEMANTIC — pou tout lòt paj yo
  ══════════════════════════════════════════════════════════ */

  /* Sifas */
  --surface-1:    #080B24;
  --surface-2:    #0B102E;
  --surface-3:    #111847;

  --card-bg:      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  --card-border:  rgba(255,255,255,.10);
  --card-hover:   rgba(29, 34, 166, .18);

  /* Tèks semantic */
  --text-primary:   var(--white);
  --text-secondary: var(--t-75);
  --text-muted:     var(--t-48);

  /* Lyen */
  --link-color:  #9DB1FF;
  --link-hover:  #C7D2FE;

  /* Bòdi semantic */
  --border-soft:   rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.14);

  /* Fonse stati bg */
  --success-bg: rgba(34,  197, 94,  .10);
  --danger-bg:  rgba(248, 113, 113, .10);
  --warning-bg: rgba(251, 191, 36,  .10);

  /* ══════════════════════════════════════════════════════════
     16. GRADIENTS — 4POCH
  ══════════════════════════════════════════════════════════ */
  --grad-blue: linear-gradient(135deg, #1D22A6 0%, #2563EB 55%, #38BDF8 100%);
  --grad-blue-dark: linear-gradient(135deg, #050718 0%, #0B102E 45%, #1D22A6 100%);
  --grad-card: linear-gradient(145deg, rgba(29,34,166,.28), rgba(255,255,255,.045));
  --grad-btn: linear-gradient(135deg, #1D22A6, #2563EB);
  --grad-btn-hover: linear-gradient(135deg, #12167A, #1D22A6);
}


/* ═══════════════════════════════════════════════════════════════
   RESET GLOBAL MINIMAL
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at 18% 0%, var(--mob-r1), transparent 34%),
    radial-gradient(circle at 88% 12%, var(--mob-r2), transparent 32%),
    radial-gradient(circle at 50% 100%, var(--mob-r3), transparent 35%),
    linear-gradient(180deg, var(--mob-bg-1), var(--mob-bg-3) 48%, var(--mob-bg-5));
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(29, 34, 166, .35);
  color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--surface-1);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark);
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-accent {
  color: var(--accent);
}

.bg-page {
  background: var(--page-bg);
}

.bg-surface-1 {
  background: var(--surface-1);
}

.bg-surface-2 {
  background: var(--surface-2);
}

.bg-surface-3 {
  background: var(--surface-3);
}

.card-glass {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.border-soft {
  border-color: var(--border-soft);
}

.border-strong {
  border-color: var(--border-strong);
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS GLOBAL
═══════════════════════════════════════════════════════════════ */

.btn,
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 800;
  color: var(--white);
  background: var(--grad-btn);
  box-shadow: 0 12px 28px rgba(29,34,166,.30);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover,
.theme-btn:hover {
  color: var(--white);
  transform: translateY(-1px);
  background: var(--grad-btn-hover);
  box-shadow: 0 16px 34px rgba(29,34,166,.42);
}

.btn:active,
.theme-btn:active {
  transform: translateY(0);
}

.btn-light,
.theme-btn-light {
  background: var(--btn-light-bg);
  color: var(--btn-light-txt);
  border: 1px solid var(--border-soft);
  box-shadow: none;
}

.btn-light:hover,
.theme-btn-light:hover {
  background: rgba(255,255,255,.12);
  color: var(--white);
}

.btn-success {
  background: linear-gradient(135deg, #16A34A, #22C55E);
}

.btn-danger {
  background: linear-gradient(135deg, #DC2626, #F87171);
}


/* ═══════════════════════════════════════════════════════════════
   FORMS GLOBAL
═══════════════════════════════════════════════════════════════ */

input,
select,
textarea {
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--input-focus);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 4px rgba(29,34,166,.16);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   ALERTS / NOTES GLOBAL
═══════════════════════════════════════════════════════════════ */

.note,
.theme-note {
  background: var(--note-bg);
  color: var(--note-text);
  border: 1px solid rgba(29, 34, 166, .22);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.warning,
.theme-warning {
  background: var(--warn-bg);
  color: var(--warn-text);
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.success,
.theme-success {
  background: var(--success-bg);
  color: var(--green-text);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.danger,
.theme-danger {
  background: var(--danger-bg);
  color: var(--red);
  border: 1px solid rgba(248,113,113,.22);
  border-radius: var(--radius);
  padding: 14px 16px;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE / DESKTOP BACKGROUND HELPERS
═══════════════════════════════════════════════════════════════ */

.theme-mobile-bg {
  background:
    radial-gradient(circle at 20% 0%, var(--mob-r1), transparent 35%),
    radial-gradient(circle at 80% 15%, var(--mob-r2), transparent 30%),
    radial-gradient(circle at 50% 100%, var(--mob-r3), transparent 32%),
    linear-gradient(180deg, var(--mob-bg-1), var(--mob-bg-3), var(--mob-bg-5));
}

.theme-desktop-bg {
  background:
    radial-gradient(circle at 20% 0%, var(--desk-r1), transparent 30%),
    radial-gradient(circle at 90% 20%, var(--desk-r2), transparent 26%),
    linear-gradient(180deg, var(--desk-top), var(--desk-mid), var(--desk-bot));
}


/* ═══════════════════════════════════════════════════════════════
   COMPATIBILITY — ansyen tokens ki te ka sou lòt paj
   Sa ede si kèk paj toujou ap rele ansyen non yo.
═══════════════════════════════════════════════════════════════ */

:root {
  --primary-color: var(--accent);
  --primary-light: rgba(29, 34, 166, .14);
  --primary-dark: var(--accent-dark);

  --ap: var(--accent);
  --ap-dark: var(--accent-dark);
  --ap-light: var(--accent-light);

  --brand: var(--accent);
  --brand-dark: var(--accent-dark);
  --brand-light: var(--accent-light);

  --main-color: var(--accent);
  --main-dark: var(--accent-dark);
  --main-light: var(--accent-light);
}