/* =============================================================================
   tokens.css — Wasla (وصلة), simulation de validation. Design STANDARD provisoire :
   la structure et les composants viennent du kit « Gronur » (même grammaire que la simulation Chayal),
   SEULES les couleurs changent : pétrole + ambre, au lieu de marine + orange.
   SEUL fichier du dossier `simulation/` qui contient des valeurs de couleur : tout le reste
   ne référence que ces variables. La charte définitive viendra du client (à remplacer ici, rien d'autre).

   Valeurs propres au projet (aucune mesurée sur le Figma ; pétrole #0E3B43 et ambre #FFB020 choisis par nous).
   Contrastes WCAG 2.1 calculés par script :
     blanc sur pétrole 12,17 · pétrole sur ambre 6,66 · blanc sur ambre 1,83 (JAMAIS de blanc sur ambre) ·
     ambre foncé #8A5600 sur blanc 6,16 · gris #5F6676 sur blanc 5,76 · ambre sur pétrole 800 5,48 ·
     ice-300 sur pétrole 800 5,42 · vert #17703D sur blanc 6,14 · rouge #B91C1C sur blanc 6,47.

   Thème par société (code d'accès) : on pose data-company="<id>" ET class="themed" sur le conteneur
   (téléphone ou page web). Les variables de palette brute sont surchargées par société ; les variables
   sémantiques sont redéclarées sur .themed pour suivre ce changement.
   ============================================================================= */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* --- Palette brute (identique en clair et en sombre ; surchargée par société) --- */
  --brand: #0E3B43;           /* pétrole : primaire, en-têtes, barre du bas, boutons pleins */
  --brand-800: #14494F;
  --brand-700: #1D5A61;
  --brand-950: #08262B;       /* fond d'appareil, viseur */
  --teal-700: #1F5C63;
  --teal-600: #2C7A80;
  --teal-400: #4FB0AC;
  --accent: #FFB020;          /* ambre : actions et accents (texte ET icônes pétrole dessus) */
  --accent-ink: #8A5600;      /* ambre pour du TEXTE sur clair (6,16 sur blanc) */
  --white: #FFFFFF;
  --gray-50: #F8F8F8;
  --gray-100: #F4F5F7;
  --gray-200: #E7E8EA;
  --gray-300: #D1D3D8;
  --gray-500: #8C929E;        /* bordure de champ (3,12 sur blanc) */
  --gray-600: #757C8B;        /* ICÔNES et grands textes seulement */
  --gray-700: #5F6676;        /* texte secondaire (5,76 sur blanc) */
  --slate-400: #8FB0AE;       /* icônes inactives de la barre du bas (5,21 sur pétrole) */
  --ice-100: #E8F4F3;
  --ice-200: #C5E0DE;
  --ice-300: #9BC7C4;
  --green: #1E8E4E;           /* ICÔNE seulement (4,17 sur blanc) */
  --green-ink: #17703D;       /* texte vert (6,14 sur blanc) */
  --red: #B91C1C;             /* (6,47 sur blanc) */

  /* --- Teintes d'aplats des pictogrammes (jamais la couleur seule pour porter une information) --- */
  --tint-soft: #D3ECEA;       /* dérivée du pétrole clair */
  --tint-accent: #FFEAC2;     /* ambre 25 % sur blanc */
  --tint-brand: #E3E9EA;      /* pétrole 12 % sur blanc */
}

/* Thème par société : palette brute seulement (voir l'en-tête). Sociétés fictives de data.js. */
[data-company="swift"] {
  --brand: #1B2F6B; --brand-800: #243D85; --brand-700: #2F4C9E; --brand-950: #101C42;
  --teal-700: #25408F; --teal-600: #3355B0; --teal-400: #6B8BDB;
  --accent: #4FC3F7; --accent-ink: #0B5A8A;
  --slate-400: #94A8D6; --ice-100: #EAF0FB; --ice-200: #C9D6F0; --ice-300: #A3B6DE;
  --tint-soft: #DCE6F8; --tint-accent: #D9F1FC; --tint-brand: #E3E6EE;
}
[data-company="gulf"] {
  --brand: #5B1530; --brand-800: #6E1F3C; --brand-700: #83294A; --brand-950: #3A0C1E;
  --teal-700: #7A2A4B; --teal-600: #9A3A60; --teal-400: #D0809C;
  --accent: #FF8F70; --accent-ink: #A33A1E;
  --slate-400: #C9A0AE; --ice-100: #F8EBEF; --ice-200: #EBCBD5; --ice-300: #D9A9B9;
  --tint-soft: #F1DCE3; --tint-accent: #FFE3DA; --tint-brand: #EDE3E6;
}

/* =============================================================================
   Sémantique CLAIR : déclarée aussi sur .themed pour suivre la palette de la société
   ============================================================================= */
:root,
[data-theme="light"],
[data-theme="light"] .themed,
.themed {
  /* --- Surfaces --- */
  --bg-screen: var(--brand);
  --sheet: var(--white);
  --tile: var(--gray-50);
  --field: var(--gray-100);
  --line: var(--gray-200);
  --line-strong: var(--gray-500);

  /* --- Texte et icônes --- */
  --ink: var(--brand);
  --ink-2: var(--gray-700);
  --ink-3: var(--gray-600);   /* icônes, jamais de petit texte */
  --link: var(--accent-ink);
  --success: var(--green);
  --success-ink: var(--green-ink);
  --danger: var(--red);
  --warning: var(--accent-ink);

  /* --- Accent --- */
  --on-accent: var(--brand);  /* texte et icônes SUR ambre : jamais de blanc */

  /* --- En-tête, barre du bas, barre d'action --- */
  --hdr-bg: var(--brand);
  --on-hdr: var(--white);
  --on-hdr-2: var(--ice-200);
  --hdr-line: var(--teal-600);
  --bar-bg: var(--brand);
  --on-bar: var(--white);
  --on-bar-2: var(--ice-200);
  --bar-inactive: var(--slate-400);
  --pill-bg: var(--white);
  --pill-fg: var(--brand);
  --bar-line: var(--ice-300);

  /* --- Boutons, puces --- */
  --btn-bg: var(--brand);
  --btn-fg: var(--white);
  --chip-on-bg: var(--brand);
  --chip-on-fg: var(--white);
  --search-bg: var(--white);
  --search-ink: var(--brand);
  --search-ph: var(--gray-700);
  --on-tint: var(--brand);

  /* --- Focus : anneau + halo, visible sur clair ET sur pétrole --- */
  --focus: var(--brand);
  --focus-halo: var(--white);

  /* --- QR / code : TOUJOURS encre foncée sur blanc, même en sombre --- */
  --qr-bg: var(--white);
  --qr-fg: var(--brand);
  --qr-track: var(--gray-200);
  --qr-ring: var(--brand);

  /* --- Carte fictive (décor, jamais de texte posé dessus) --- */
  --map-land: var(--gray-100);
  --map-block: var(--gray-200);
  --map-road: var(--white);
  --map-water: var(--tint-soft);
  --pin-bg: var(--brand);
  --pin-fg: var(--white);
  --pin-ring: var(--white);
  --user-dot: var(--teal-400);

  /* --- Viseur de caméra --- */
  --scan-bg: var(--brand-950);
  --on-scan: var(--white);

  /* --- Squelettes, voile, toast, scène --- */
  --sk-a: var(--gray-100);
  --sk-b: var(--gray-200);
  --scrim: rgb(8 38 43 / 0.6);
  --toast-bg: var(--brand-950);
  --on-toast: var(--white);
  --stage: var(--gray-100);
  --device: var(--brand-950);
  --shadow-phone: 0 24px 60px rgb(8 38 43 / 0.25);
  --shadow-sheet: 0 -8px 32px rgb(8 38 43 / 0.2);
  --shadow-pin: 0 2px 6px rgb(8 38 43 / 0.3);
  --shadow-card: 0 4px 16px rgb(8 38 43 / 0.25);

  /* --- Forme --- */
  --r-sheet: 32px;
  --r-card: 24px;
  --r-field: 18px;
  --r-btn: 999px;
  --r-art: 18px;
  --tap: 44px;                /* zone tactile minimale */

  /* --- Typographie : Inter (latin), Tajawal (arabe). Aucun CDN : polices installées + repli système ;
     en Flutter, assets embarqués. --- */
  --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Tajawal", "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --fs-32: 2rem;
  --fs-22: 1.375rem;
  --fs-20: 1.25rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-14: 0.875rem;
  --fs-12: 0.75rem;
  --lh-title: 1.25;
  --lh-body: 1.5;
}

/* =============================================================================
   Sémantique SOMBRE (conçu ici : le kit n'en fournit pas). Surfaces dérivées de la palette brute
   ============================================================================= */
[data-theme="dark"],
[data-theme="dark"] .themed {
  color-scheme: dark;

  --bg-screen: var(--brand);
  --sheet: var(--brand-800);
  --tile: var(--brand-700);
  --field: var(--brand-700);
  --line: var(--brand-700);
  --line-strong: #7FA3A2;     /* bordure de champ (3,66 sur brand-800) */

  --ink: var(--white);
  --ink-2: var(--ice-200);
  --ink-3: var(--ice-300);
  --link: var(--accent);
  --success: #4ADE80;         /* 4,48 sur brand-700 */
  --success-ink: #4ADE80;
  --danger: #F87171;          /* 3,62 sur brand-800 : icône seulement */
  --warning: var(--accent);

  --hdr-bg: var(--brand);
  --bar-bg: var(--brand-700);
  --bar-inactive: var(--slate-400);

  --btn-bg: var(--accent);
  --btn-fg: var(--brand);
  --chip-on-bg: var(--ice-200);
  --chip-on-fg: var(--brand);
  --search-bg: var(--brand-700);
  --search-ink: var(--white);
  --search-ph: var(--ice-300);

  --tint-soft: var(--teal-600);
  --tint-accent: #5C4A25;
  --tint-brand: var(--teal-700);
  --on-tint: var(--white);

  --focus: var(--white);
  --focus-halo: var(--brand);

  --map-land: var(--brand-950);
  --map-block: var(--brand-800);
  --map-road: var(--brand-700);
  --map-water: var(--teal-700);
  --pin-bg: var(--teal-600);

  --sk-a: var(--brand-700);
  --sk-b: var(--teal-700);
  --scrim: rgb(0 0 0 / 0.65);
  --stage: var(--brand-950);
  --device: var(--brand-700);
  --shadow-phone: 0 24px 60px rgb(0 0 0 / 0.6);
  --shadow-sheet: 0 -8px 32px rgb(0 0 0 / 0.5);
}

/* Arabe : Tajawal, interligne plus haut, jamais d'interlettrage */
:lang(ar) {
  --lh-body: 1.7;
  --lh-title: 1.45;
}