/* ============================================================
   PIQO — global.css
   Variables CSS, reset, contextes screen-dark / screen-light
   ============================================================ */

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Couleurs dark */
    --color-dark-bg:        #0A1628;
    --color-dark-surface:   #111E35;
    --color-dark-border:    rgba(255,255,255,0.08);
    --color-dark-text:      #F0F4FF;
    --color-dark-text-sub:  rgba(240,244,255,0.45);
    --color-dark-input-bg:  #0D1A2E;

    /* Couleurs light */
    --color-light-bg:       #F5F7FA;
    --color-light-surface:  #FFFFFF;
    --color-light-border:   #E2E8F0;
    --color-light-text:     #0F172A;
    --color-light-text-sub: #64748B;

    /* Brand */
    --color-primary:        #FC4F55;
    --color-primary-dark:   #E03E44;
    --color-primary-light:  #FF7A7E;

    /* Feedback */
    --color-success:        #10B981;
    --color-error:          #EF4444;
    --color-warning:        #F59E0B;
    --color-info:           #3B82F6;

    /* Typo */
    --font-family:          'DM Sans', sans-serif;
    --font-xs:              10px;
    --font-sm:              12px;
    --font-base:            13px;
    --font-lg:              15px;
    --font-xl:              17px;
    --font-2xl:             20px;
    --font-4xl:             32px;
    --font-medium:          500;
    --font-semibold:        600;
    --font-bold:            700;
    --font-extrabold:       800;

    /* Espacements */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   12px;
    --space-lg:   16px;
    --space-xl:   24px;
    --space-2xl:  32px;
    --space-3xl:  48px;

    /* Rayons */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.2);
    --focus-ring:  0 0 0 3px rgba(252,79,85,0.25);

    /* Z-index */
    --z-sticky: 100;
    --z-modal:  200;

    /* Transitions */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 350ms ease;
}

/* ============================================================
   RESET
   ============================================================ */

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

html, body {
    height: 100%;
    font-family: var(--font-family);
    font-weight: 350;
    font-size: var(--font-base);
    line-height: 1.45;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-family); }
input, textarea, select { font-family: var(--font-family); font-size: 16px; }

/* iOS anti-zoom (la racine html est à 13px → les rem rendent < 16px et iOS zoome).
   Filet de sécurité forte spécificité : TOUT champ de saisie texte >= 16px. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea,
select {
    font-size: 16px;
}
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: inherit;
}

h1 {
    font-size: clamp(1.5rem, 4.8vw, 2rem);
    font-weight: var(--font-bold);
}

h2 {
    font-size: clamp(1.25rem, 3.8vw, 1.6rem);
    font-weight: var(--font-bold);
}

h3 {
    font-size: clamp(1.125rem, 3.2vw, 1.35rem);
    font-weight: var(--font-semibold);
}

h4 {
    font-size: clamp(1rem, 2.6vw, 1.125rem);
    font-weight: var(--font-semibold);
}

h5 {
    font-size: 1rem;
    font-weight: var(--font-semibold);
}

h6 {
    font-size: 0.875rem;
    font-weight: var(--font-medium);
}

/* ============================================================
   CONTEXTES
   ============================================================ */

.screen-dark {
    background: var(--color-dark-bg);
    color: var(--color-dark-text);
    min-height: 100vh;
}

.screen-dark--default {
    background: var(--color-dark-bg);
}

.screen-dark--gradient-a {
    background: linear-gradient(180deg, #034f85 0%, #071722 100%);
}

.screen-dark--gradient-b {
    background: linear-gradient(180deg, #061c2b 0%, #071722 100%);
}

.screen-dark--gradient-c {
    background: linear-gradient(180deg, #0b2742 0%, #071722 100%);
}

.screen-dark--gradient-account {
    background: linear-gradient(180deg, #044371 0%, #071722 100%);
}

.screen-light {
    background: var(--color-light-bg);
    color: var(--color-light-text);
    min-height: 100vh;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */

.text-sm      { font-size: var(--font-sm); }
.text-xs      { font-size: var(--font-xs); }
.text-muted-dark  { color: var(--color-dark-text-sub); }
.text-muted-light { color: var(--color-light-text-sub); }

.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

#piqo-app {
    min-height: 100vh;
    background: var(--color-dark-bg);
}