/*
Theme Name:  CFA Jean Bosco par Dity
Theme URI:   https://www.dity.fr
Description: Thème sur mesure CFA Jean Bosco — Dity
Author:      Dity
Version:     7.3.1
Text Domain: cfa-jean-bosco
*/

/* Police principale : Rethink Sans, Noto Sans Mono */
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {

  /* Fonts */
  --font-body:      'Rethink Sans', 'Inter', system-ui, sans-serif;
  --font-display:	'Rethink Sans', 'Inter', system-ui, sans-serif;
  --font-spec:		'Noto Sans Mono', system-ui, sans-serif;

  /* Type scale (fluid) */
  	--text-2xs:   clamp(0.64rem, 0.62rem + 0.18vw, 0.74rem);
	--text-xs:    clamp(0.68rem, 0.66rem + 0.20vw, 0.8rem);
	--text-sm:    clamp(0.82rem, 0.78rem + 0.28vw, 0.94rem);
	--text-base:  clamp(0.94rem, 0.9rem + 0.12vw, 0.98rem);
	--text-md:    clamp(0.98rem, 0.9rem + 0.22vw, 1.12rem);
	--text-md-lg: clamp(1.02rem, 0.94rem + 0.32vw, 1.22rem);
	--text-lg:    clamp(1.12rem, 0.96rem + 0.55vw, 1.5rem);
	--text-xl:    clamp(1.32rem, 1.08rem + 0.95vw, 1.9rem);
	--text-2xl:   clamp(1.56rem, 1.16rem + 1.45vw, 2.6rem);
	--text-3xl:   clamp(1.9rem, 1.2rem + 2.2vw, 3.25rem);
	--text-4xl:   clamp(2.1rem, 1.28rem + 2.8vw, 3.7rem);

  --tracking-tight: -0.01em;
  --tracking-tighter: -0.02em;

  /* Spacing (base 4px) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Palette CFA ── */
  --color-primary:           #E11F47;   /* Rose CFA — boutons Candidater */
  --color-primary-hover:     #C11A3D;
  --color-primary-active:    #A11532;
  --color-primary-light:     #FDE7EC;   /* Fond rose très clair */
  --color-primary-highlight: #FBD0D9;
	
  /* Accent vert lime (badges JPO, états valides) */
  --color-accent:            #C6DD8A;
  --color-accent-hover:      #B5CC78;
  --color-accent-dark:       #4B7B1E;
	
  --color-cyan:				#96D8DC;
  --color-green:			#C8DC96;
  --color-green-light:		#E6F1C9;
  --color-blue:          	#BDE3F1;
  --color-blue-light:		#D5F0F2;
  --color-blue-text:     	#0F4C66;
  --color-orange : 			#FEC383;
  --color-orange-text : 	#F28C1C;

  /* Surfaces — fond crème/beige clair */
  --color-bg:                #ECE8E2;   /* Fond beige principal */
  --color-surface:           #FFFFFF;
  --color-surface-2:         #F6F5F2;
  --color-surface-alt:       #F6F5F2;
  --color-surface-offset:    #ECE8E2;
  --color-divider:           #D9D3C7;
  --color-border:            #989590;

  /* Text */
  --color-text:              #1D1D1B;   /* Noir Figma */
  --color-text-muted:        #000000a1;
  --color-text-faint:        #9A9892;
  --color-text-inverse:      #FFFFFF;

  /* États sémantiques */
  --color-success:           #4B7B1E;
  --color-warning:           #D97706;
  --color-error:             #DC2626;
  --color-info:               #0F4C66;

  /* Tags / Badges génériques (rose) */
  --color-tag-bg:            #FDE7EC;
  --color-tag-text:          #A11532;

  /* Radius */
  --radius-sm:    0.25rem;
  --radius-md:    0.5rem;
  --radius-lg:    0.75rem;
  --radius-xl:    1rem;
  --radius-2xl:   1.5rem;
  --radius-3xl:   2.5rem;
  --radius-pill:  100px;
  --radius-full:  9999px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(29,29,27,0.06);
  --shadow-md:   0 4px 12px rgba(29,29,27,0.08);
  --shadow-lg:   0 16px 40px rgba(29,29,27,0.14);
  --shadow-card: 0 1px 3px rgba(29,29,27,0.06), 0 1px 2px rgba(29,29,27,0.04);

  /* Transitions */
  --transition:        180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:   320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Widths */
  --content-narrow:  990px;
  --content-default: 1250px;
  --content-wide:    1350px;
  --content-max:     1400px;
  --content-full:    100%;

  /* Button */
  --btn-height:        50px;
  --btn-height-sm:     45px;
  --btn-radius:        0px;
  --btn-padding-x:     1.5rem;
  --btn-arrow-w:       40px;
	
  /* Header */
  --header-offset: 15px;
}