/* =============================================================================
 * Alternance Reborn — Design tokens 2026
 * Modernization target. Use these variables in place of the old ones.
 * Old tokens still live in colors_and_type.css for legacy surfaces.
 * ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ────────────────────────────── Color — Brand ─────────────────────────────
   * One green. #1FB25A passes WCAG AA white-on-color.
   * Gold reserved exclusively for Premium surfaces.
   */
  --color-brand-50:   #E8F7EE;
  --color-brand-100:  #C6EBD3;
  --color-brand-500:  #1FB25A;   /* primary action */
  --color-brand-600:  #18924A;   /* hover */
  --color-brand-700:  #0F6A35;   /* pressed */

  --color-gold-500:   #D4A017;   /* Premium accent */
  --color-gold-600:   #A67A1F;

  /* ────────────────────────────── Color — Neutrals ────────────────────────── */
  --color-text-strong: #0F1419;  /* headings, body */
  --color-text:        #1F2937;  /* default body */
  --color-text-muted:  #6B7280;  /* captions, meta */
  --color-text-subtle: #9CA3AF;  /* placeholders */
  --color-text-inverse:#FFFFFF;

  --color-bg:          #FFFFFF;
  --color-bg-subtle:   #FAFAFA;  /* page background */
  --color-bg-muted:    #F3F4F6;  /* raised neutral zones */

  --color-border:      #E5E7EB;
  --color-border-strong:#D1D5DB;

  /* ────────────────────────────── Color — Semantic ────────────────────────── */
  --color-success:     #1FB25A;
  --color-success-bg:  #E8F7EE;
  --color-info:        #3B82F6;
  --color-info-bg:     #EFF6FF;
  --color-warning:     #F59E0B;
  --color-warning-bg:  #FEF3C7;
  --color-danger:      #EF4444;
  --color-danger-bg:   #FEE2E2;

  /* ────────────────────────────── Color — Avatars (7) ─────────────────────── */
  --avatar-1: #FDE68A;
  --avatar-2: #C6EBD3;
  --avatar-3: #BAE6FD;
  --avatar-4: #C4B5FD;
  --avatar-5: #FED7AA;
  --avatar-6: #FBCFE8;
  --avatar-7: #FECACA;

  /* ────────────────────────────── Typography ──────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 8 sizes only */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ────────────────────────────── Spacing — 7 values only ─────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ────────────────────────────── Radius ──────────────────────────────────── */
  --radius-sm:   4px;   /* inputs, chips */
  --radius-md:   8px;   /* cards, containers */
  --radius-lg:  12px;   /* modals, hero panels */
  --radius-full: 9999px;/* pills, avatars */

  /* ────────────────────────────── Shadows — 3 levels, neutral black ───────── */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06);
  --shadow-md: 0 1px 3px rgba(15, 20, 25, 0.08), 0 4px 12px rgba(15, 20, 25, 0.06);
  --shadow-lg: 0 4px 8px rgba(15, 20, 25, 0.08), 0 16px 32px rgba(15, 20, 25, 0.12);
  --shadow-focus: 0 0 0 3px rgba(31, 178, 90, 0.25);

  /* ────────────────────────────── Motion ──────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  300ms;
  --transition-default: all var(--duration-base) var(--ease-out);

  /* ────────────────────────────── Layout ──────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1120px;   /* default max */
  --container-2xl:1280px;

  /* Icon sizing */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

/* Breakpoints (for reference — use in @media queries)
 * @media (min-width: 640px)  — sm
 * @media (min-width: 1024px) — lg
 * @media (min-width: 1280px) — xl
 */

/* Scoped reset — only within DS 2026 containers */
.ar-auth-page *,
.ar-auth-page *::before,
.ar-auth-page *::after { box-sizing: border-box; }
.ar-auth-page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}