/* ============================================================
   CONTEMP Design Tokens
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --c-teal:           #079BAF;
  --c-teal-dark:      #067a8a;
  --c-teal-light:     #0bbdd4;
  --c-teal-secondary: #009999;
  --c-orange:         #E25A00;
  --c-orange-hover:   #DD8B55;
  --c-orange-dark:    #c24e00;

  /* ── Neutrals ── */
  --c-white:          #FFFFFF;
  --c-off-white:      #F3F4F8;
  --c-gray-100:       #E8E9ED;
  --c-gray-200:       #D1D3DA;
  --c-gray-300:       #9EA1AB;
  --c-gray-400:       #6B6F7B;
  --c-gray-500:       #3F3F3F;
  --c-black:          #1A1A2E;
  --c-dark:           #0F0F1A;

  /* ── Semantic ── */
  --c-success:        #22C55E;
  --c-warning:        #F59E0B;
  --c-danger:         #EF4444;

  /* ── Typography ── */
  --ff-heading:       'Open Sans', sans-serif;
  --ff-body:          'Inter', sans-serif;
  --ff-brand:         'Roboto', sans-serif;

  --fs-xs:            0.75rem;    /* 12px */
  --fs-sm:            0.875rem;   /* 14px */
  --fs-base:          1rem;       /* 16px */
  --fs-md:            1.125rem;   /* 18px */
  --fs-lg:            1.25rem;    /* 20px */
  --fs-xl:            1.5rem;     /* 24px */
  --fs-2xl:           2rem;       /* 32px */
  --fs-3xl:           2.5rem;     /* 40px */
  --fs-4xl:           3rem;       /* 48px */
  --fs-5xl:           3.75rem;    /* 60px */

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  --lh-tight:         1.2;
  --lh-base:          1.6;
  --lh-relaxed:       1.8;

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

  /* ── Layout ── */
  --max-width:        1140px;
  --max-width-lg:     1320px;
  --max-width-sm:     720px;

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

  /* ── Shadows ── */
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:        0 16px 50px rgba(0, 0, 0, 0.16);
  --shadow-glow-teal: 0 0 30px rgba(7, 155, 175, 0.3);
  --shadow-glow-orange: 0 0 30px rgba(226, 90, 0, 0.3);

  /* ── Transitions ── */
  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* ── Z-Index Scale ── */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-overlay:        300;
  --z-modal:          400;
  --z-toast:          500;
}