/* ============================================================
   ORDERSYNQ Design System — Tokens
   Source unique de vérité pour couleurs, typo, espacement,
   rayons, ombres et animations. Light + dark via [data-theme].
   Doc : docs/DESIGN_SYSTEM.md
   ============================================================ */

:root {
    /* ---- Marque ---- */
    --os-brand: #7B4FE0;

    /* ---- Typographie ---- */
    --os-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --os-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

    /* Échelle typo (base 13px, densité fintech) */
    --os-text-2xs: 0.6875rem;  /* 11px — méta, timestamps */
    --os-text-xs:  0.75rem;    /* 12px — labels, badges */
    --os-text-sm:  0.8125rem;  /* 13px — corps dense, tables */
    --os-text-md:  0.875rem;   /* 14px — corps standard, inputs */
    --os-text-lg:  1rem;       /* 16px — titres de section */
    --os-text-xl:  1.125rem;   /* 18px — titres de modal */
    --os-text-2xl: 1.375rem;   /* 22px — titres de page */
    --os-text-3xl: 1.75rem;    /* 28px — chiffres héros */

    --os-weight-regular: 400;
    --os-weight-medium: 500;
    --os-weight-semibold: 600;
    --os-weight-bold: 700;

    --os-leading-tight: 1.25;
    --os-leading-normal: 1.5;
    --os-leading-relaxed: 1.65;

    /* ---- Espacement (grille 4pt) ---- */
    --os-sp-1: 0.25rem;   /*  4px */
    --os-sp-2: 0.5rem;    /*  8px */
    --os-sp-3: 0.75rem;   /* 12px */
    --os-sp-4: 1rem;      /* 16px */
    --os-sp-5: 1.25rem;   /* 20px */
    --os-sp-6: 1.5rem;    /* 24px */
    --os-sp-8: 2rem;      /* 32px */
    --os-sp-10: 2.5rem;   /* 40px */
    --os-sp-12: 3rem;     /* 48px */
    --os-sp-16: 4rem;     /* 64px */

    /* ---- Rayons (flat, crisp) ---- */
    --os-r-sm: 3px;    /* badges, petits contrôles */
    --os-r-md: 5px;    /* boutons, inputs */
    --os-r-lg: 7px;    /* items de nav, dropdown, tuiles */
    --os-r-xl: 9px;    /* cards */
    --os-r-2xl: 12px;  /* modals */
    --os-r-full: 999px;

    /* ---- Animation ---- */
    --os-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* décélération marquée (Linear) */
    --os-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --os-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* léger rebond (toasts, modals) */
    --os-dur-fast: 100ms;    /* hover, focus */
    --os-dur-base: 160ms;    /* boutons, inputs, tabs */
    --os-dur-slow: 240ms;    /* modals, dropdowns */
    --os-dur-slower: 400ms;  /* skeletons, transitions de page */

    /* ---- Z-index ---- */
    --os-z-sticky: 100;
    --os-z-dropdown: 500;
    --os-z-modal: 1100;
    --os-z-toast: 1300;
    --os-z-tooltip: 1400;

    /* ---- Layout ---- */
    --os-sidebar-w: 250px;
}

/* ============================================================
   Thème LIGHT — « papier & encre » (DA landing concept N).
   Fond papier crème, encre chaude, lignes beiges solides.
   Accent : bleu classique sobre. Le violet reste réservé au logo.
   ============================================================ */
:root, [data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --os-bg: #FBFAF7;          /* papier crème (landing) */
    --os-surface: #FFFFFF;     /* cards, modals, topbar */
    --os-surface-2: #F4F2EC;   /* hover, wells, inputs sur card */
    --os-surface-3: #ECE9E1;   /* pressed, selected */

    /* Texte */
    --os-text-1: #17141A;      /* encre — titres, valeurs */
    --os-text-2: #57515C;      /* corps secondaire — AA sur blanc */
    --os-text-3: #6B6572;      /* muted, labels — AA sur blanc */
    --os-text-faint: #A09AA8;  /* décoratif uniquement, jamais d'info seule */

    /* Bordures — lignes beiges SOLIDES (pas de rgba lavé) */
    --os-border: #E4E1DA;
    --os-border-strong: #C9C4BA;
    --os-border-ink: #17141A;  /* cadres encre 1.5px : modals, menus, cards fortes */

    /* Accent — bleu classique (liens, focus, actif). Sobre, pas « IA ». */
    --os-accent: #2E5FB7;
    --os-accent-hover: #244C96;
    --os-accent-active: #1D3E7C;
    --os-accent-soft: rgba(46, 95, 183, 0.08);
    --os-accent-soft-2: rgba(46, 95, 183, 0.14);
    --os-on-accent: #FFFFFF;
    --os-focus-ring: rgba(46, 95, 183, 0.35);

    /* Action primaire — encre pleine, hover bleu (signature landing) */
    --os-primary-bg: #17141A;
    --os-primary-fg: #FFFFFF;
    --os-primary-hover-bg: #2E5FB7;
    --os-primary-active-bg: #244C96;

    /* Sémantique — paires texte/fond soft */
    --os-success: #0E9F6E;
    --os-success-soft: rgba(14, 159, 110, 0.1);
    --os-danger: #C6423C;
    --os-danger-soft: rgba(198, 66, 60, 0.08);
    --os-warning: #A05A18;
    --os-warning-soft: rgba(232, 151, 60, 0.14);
    --os-info: #2E5FB7;
    --os-info-soft: rgba(46, 95, 183, 0.08);

    /* Touche chaude (badges, points d'attention non-critiques) */
    --os-amber: #E8973C;
    --os-amber-soft: rgba(232, 151, 60, 0.14);

    /* Data-viz PnL */
    --os-gain: #0E9F6E;
    --os-loss: #C6423C;

    /* Ombres — flat : bordures + fonds. L'ombre dure décalée est la
       signature de la DA (modals, cards mises en avant). */
    --os-shadow-xs: none;
    --os-shadow-sm: none;
    --os-shadow-md: 0 2px 8px rgba(23, 20, 26, 0.05);
    --os-shadow-lg: 0 8px 24px rgba(23, 20, 26, 0.08);
    --os-shadow-hard: 6px 6px 0 #F2F0EA;             /* cards fortes */
    --os-shadow-hard-ink: 8px 8px 0 rgba(23, 20, 26, 0.14); /* modals, menus */
    --os-shadow-overlay: 8px 8px 0 rgba(23, 20, 26, 0.14);

    --os-backdrop: rgba(23, 20, 26, 0.45);
    --os-skeleton-base: #EFEDE6;
    --os-skeleton-sheen: #FBFAF7;
}

/* ============================================================
   Thème DARK — encre chaude, papier inversé, contrastes AA
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --os-bg: #141217;
    --os-surface: #1B181F;
    --os-surface-2: #232028;
    --os-surface-3: #2C2833;

    --os-text-1: #F4F2ED;      /* blanc papier chaud */
    --os-text-2: #B8B3BC;
    --os-text-3: #948F98;
    --os-text-faint: #5F5A64;

    --os-border: rgba(244, 242, 237, 0.09);
    --os-border-strong: rgba(244, 242, 237, 0.18);
    --os-border-ink: rgba(244, 242, 237, 0.32);

    --os-accent: #7AA2F0;
    --os-accent-hover: #93B4F4;
    --os-accent-active: #6890DE;
    --os-accent-soft: rgba(122, 162, 240, 0.13);
    --os-accent-soft-2: rgba(122, 162, 240, 0.2);
    --os-on-accent: #14161C;
    --os-focus-ring: rgba(122, 162, 240, 0.45);

    /* Action primaire — papier sur encre (inversion de la signature) */
    --os-primary-bg: #F4F2ED;
    --os-primary-fg: #17141A;
    --os-primary-hover-bg: #7AA2F0;
    --os-primary-active-bg: #6890DE;

    --os-success: #34D399;
    --os-success-soft: rgba(52, 211, 153, 0.12);
    --os-danger: #F07B72;
    --os-danger-soft: rgba(240, 123, 114, 0.12);
    --os-warning: #EBB35C;
    --os-warning-soft: rgba(235, 179, 92, 0.12);
    --os-info: #7AA2F0;
    --os-info-soft: rgba(122, 162, 240, 0.13);

    --os-amber: #EBB35C;
    --os-amber-soft: rgba(235, 179, 92, 0.12);

    --os-gain: #34D399;
    --os-loss: #F07B72;

    --os-shadow-xs: none;
    --os-shadow-sm: none;
    --os-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --os-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --os-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.35);
    --os-shadow-hard-ink: 8px 8px 0 rgba(0, 0, 0, 0.4);
    --os-shadow-overlay: 8px 8px 0 rgba(0, 0, 0, 0.4);

    --os-backdrop: rgba(0, 0, 0, 0.6);
    --os-skeleton-base: #232028;
    --os-skeleton-sheen: #2C2833;
}

/* ============================================================
   Alias LEGACY — variables historiques mappées sur les tokens.
   NE PAS utiliser dans du nouveau code (voir DESIGN_SYSTEM.md).
   Supprimés quand toutes les vues seront migrées.
   ============================================================ */
:root, [data-theme="light"], [data-theme="dark"] {
    /* Famille _Layout historique */
    --bg: var(--os-bg);
    --bg2: var(--os-surface);
    --sidebar-bg: var(--os-surface);
    --text: var(--os-text-1);
    --text2: var(--os-text-2);
    --text3: var(--os-text-3);
    --border: var(--os-border);
    --accent: var(--os-accent);
    --accent-light: var(--os-accent-soft);
    --accent-hover: var(--os-accent-hover);
    --success: var(--os-success);
    --danger: var(--os-danger);
    --warning: var(--os-warning);
    --shadow: var(--os-shadow-sm);
    --sw: var(--os-sidebar-w);

    /* Famille app.css historique (n'était définie que dans Brokers.cshtml) */
    --bg-primary: var(--os-bg);
    --bg-secondary: var(--os-surface);
    --border-color: var(--os-border);
    --text-primary: var(--os-text-1);
    --text-secondary: var(--os-text-2);
    --text-muted: var(--os-text-3);
    --card-shadow: var(--os-shadow-sm);
}