/* CompuZign Atomic Engine — Design Tokens */
:root {
  /* Brand */
  --cz-color-bg: #050505;
  --cz-color-bg-soft: #0a0a0a;
  --cz-color-surface: #101010;
  --cz-color-surface-2: #171717;
  --cz-color-surface-3: #202020;
  --cz-color-text: #ffffff;
  --cz-color-muted: #a6a6a6;
  --cz-color-muted-2: #737373;
  --cz-color-line: rgba(255,255,255,.11);
  --cz-color-line-strong: rgba(255,255,255,.18);
  --cz-color-accent: #ffda17;
  --cz-color-accent-soft: #ffe45c;
  --cz-color-accent-dark: #b89400;
  --cz-color-success: #65d98a;
  --cz-color-danger: #ff6161;

  /* Typography */
  --cz-font-main: 'IBM Plex Sans', sans-serif;
  --cz-font-size-xs: .73rem;
  --cz-font-size-sm: .86rem;
  --cz-font-size-md: .94rem;
  --cz-font-size-base: 1rem;
  --cz-font-size-lg: 1.08rem;
  --cz-font-size-xl: 1.4rem;
  --cz-line-height-body: 1.75;

  /* Rhythm — foundation unit. All spatial values are multiples of this. */
  --cz-rhythm: 4px;

  /* Spacing — numeric scale. Every value is an exact rhythm multiple. */
  --cz-space-1: 4px;    /*  1 × rhythm */
  --cz-space-2: 8px;    /*  2 × rhythm */
  --cz-space-3: 12px;   /*  3 × rhythm */
  --cz-space-4: 16px;   /*  4 × rhythm */
  --cz-space-5: 20px;   /*  5 × rhythm */
  --cz-space-6: 24px;   /*  6 × rhythm */
  --cz-space-7: 28px;   /*  7 × rhythm */
  --cz-space-8: 32px;   /*  8 × rhythm */
  --cz-space-10: 40px;  /* 10 × rhythm */
  --cz-space-12: 48px;  /* 12 × rhythm */
  --cz-space-16: 64px;  /* 16 × rhythm */
  --cz-section-space: clamp(72px, 10vw, 128px);

  /* Spacing contract — named aliases over the numeric scale.
     These are the universal contract levels for the spacing family.
     xs through xl are equal evolutionary levels, not equal dimensions.
     xs   =  1 rhythm  =  4px
     sm   =  2 rhythm  =  8px
     base =  4 rhythm  = 16px
     md   =  6 rhythm  = 24px
     lg   =  8 rhythm  = 32px
     xl   = 12 rhythm  = 48px  */
  --cz-space-xs:   var(--cz-space-1);
  --cz-space-sm:   var(--cz-space-2);
  --cz-space-base: var(--cz-space-4);
  --cz-space-md:   var(--cz-space-6);
  --cz-space-lg:   var(--cz-space-8);
  --cz-space-xl:   var(--cz-space-12);

  /* Layout */
  --cz-container: min(100% - max(32px, 8vw), 1440px);
  --cz-sidebar-width: 360px;
  --cz-grid-gap: clamp(20px, 2.5vw, 32px);

  /* Radius */
  --cz-radius-xs: 8px;
  --cz-radius-sm: 12px;
  --cz-radius-md: 20px;
  --cz-radius-lg: 24px;
  --cz-radius-xl: 28px;
  --cz-radius-2xl: 32px;
  --cz-radius-pill: 999px;

  /* Motion */
  --cz-ease: cubic-bezier(.16,1,.3,1);
  --cz-transition-fast: .2s var(--cz-ease);
  --cz-transition: .3s var(--cz-ease);
  --cz-transition-slow: .45s var(--cz-ease);

  /* Shadows */
  --cz-shadow-card: 0 24px 90px rgba(0,0,0,.45);
  --cz-shadow-accent: 0 16px 50px rgba(255,218,23,.22);
}