/* ============================================================
   tokens.css — Project Aurora Design Tokens
   All design decisions expressed as CSS custom properties.
   Never hardcode colors, spacing, or type sizes elsewhere.
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-primary:       #0A5C36;
  --color-primary-dark:  #063B22;
  --color-primary-light: #E6F4EA;
  --color-accent:        #F2A900;
  --color-accent-text:   #92400E;
  --color-bg:            #F8FAFC;
  --color-surface:       #FFFFFF;
  --color-border:        #E2E8F0;
  --color-text-primary:  #0F172A;
  --color-text-muted:    #64748B;
  --color-success:       #10B981;
  --color-error:         #EF4444;

  /* ── Typography — Font Families ── */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── Typography — Font Sizes ── */
  --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 */

  /* ── Typography — Weights ── */
  --weight-body:    400;
  --weight-label:   500;
  --weight-heading: 600;

  /* ── Typography — Line Heights & Tracking ── */
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --ls-heading: -0.02em;

  /* ── Spacing ── */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-128: 128px;

  /* ── Layout ── */
  --container-max: 1200px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ── Transitions ── */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}