/* ==========================================================================
   Design Tokens — Dévoué Design System
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Colors
     ----------------------------------------------------------------------- */

  /* Primary palette (60/30/10 rule) */
  --color-white:        #FFFFFF;
  --color-black:        #1A1A1A;
  --color-blue:         #2B6CB0;

  /* Blue scale */
  --color-blue-light:   #EBF4FF;
  --color-blue-100:     #BEE3F8;
  --color-blue-200:     #90CDF4;
  --color-blue-300:     #63B3ED;
  --color-blue-400:     #4299E1;
  --color-blue-500:     #2B6CB0;
  --color-blue-600:     #2C5282;
  --color-blue-700:     #2A4365;

  /* Neutral scale */
  --color-gray-50:      #FAFAFA;
  --color-gray-100:     #F5F5F5;
  --color-gray-200:     #E5E5E5;
  --color-gray-300:     #D4D4D4;
  --color-gray-400:     #A3A3A3;
  --color-gray-500:     #737373;
  --color-gray-600:     #525252;
  --color-gray-700:     #404040;
  --color-gray-800:     #262626;

  /* Secondary pastels (rare usage) */
  --color-pastel-pink:    #FFF0F5;
  --color-pastel-yellow:  #FFFFF0;
  --color-pastel-green:   #F0FFF4;
  --color-pastel-lavender:#F5F0FF;

  /* Semantic colors */
  --color-bg:           var(--color-white);
  --color-text:         var(--color-black);
  --color-accent:       var(--color-blue);
  --color-accent-light: var(--color-blue-light);
  --color-border:       var(--color-black);
  --color-muted:        var(--color-gray-500);

  /* -----------------------------------------------------------------------
     Typography
     ----------------------------------------------------------------------- */

  --font-display:       'Coustard', Georgia, serif;
  --font-text:          'Orienta', 'Segoe UI', sans-serif;

  /* Font sizes — modular scale (1.25 ratio) */
  --text-xs:            0.75rem;    /* 12px */
  --text-sm:            0.875rem;   /* 14px */
  --text-base:          1rem;       /* 16px */
  --text-lg:            1.125rem;   /* 18px */
  --text-xl:            1.25rem;    /* 20px */
  --text-2xl:           1.5rem;     /* 24px */
  --text-3xl:           1.875rem;   /* 30px */
  --text-4xl:           2.25rem;    /* 36px */
  --text-5xl:           3rem;       /* 48px */
  --text-6xl:           3.75rem;    /* 60px */

  /* Font weights */
  --weight-regular:     400;
  --weight-bold:        700;
  --weight-black:       900;

  /* Line heights */
  --leading-tight:      1.2;
  --leading-normal:     1.5;
  --leading-relaxed:    1.75;

  /* -----------------------------------------------------------------------
     Spacing
     ----------------------------------------------------------------------- */

  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* -----------------------------------------------------------------------
     Borders & Radii
     ----------------------------------------------------------------------- */

  --border-thin:     2px solid var(--color-border);
  --border-thick:    3px solid var(--color-border);
  --border-heavy:    4px solid var(--color-border);

  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-full:     9999px;

  /* -----------------------------------------------------------------------
     Shadows
     ----------------------------------------------------------------------- */

  --shadow-sm:    2px 2px 0 var(--color-black);
  --shadow-md:    4px 4px 0 var(--color-black);
  --shadow-lg:    6px 6px 0 var(--color-black);

  /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */

  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    400ms ease;

  /* -----------------------------------------------------------------------
     Layout
     ----------------------------------------------------------------------- */

  --max-width:          1200px;
  --sidebar-width:      260px;
}