/* Bookify Technology — Color Tokens */

:root {
  /* ── Primary (Brand Orange-Red) ── */
  --color-primary-50:  #FFF3EF;
  --color-primary-100: #FFE2D5;
  --color-primary-200: #FFC4A8;
  --color-primary-300: #FF9E72;
  --color-primary-400: #FF773D;
  --color-primary-500: #FF551A;
  --color-primary-600: #E03D06;
  --color-primary-700: #B83000;
  --color-primary-800: #8F2500;
  --color-primary-900: #661A00;

  /* ── Neutral ── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8F8F7;
  --color-neutral-100: #F0EFEE;
  --color-neutral-200: #E0DFDD;
  --color-neutral-300: #C4C3C0;
  --color-neutral-400: #A3A19D;
  --color-neutral-500: #7E7C78;
  --color-neutral-600: #5E5C58;
  --color-neutral-700: #403E3A;
  --color-neutral-800: #282622;
  --color-neutral-900: #16140F;
  --color-neutral-950: #0C0B08;

  /* ── Semantic ── */
  --color-success-50:  #F0FDF4;
  --color-success-100: #DCFCE7;
  --color-success-500: #16A34A;
  --color-success-700: #15803D;

  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-500: #D97706;
  --color-warning-700: #B45309;

  --color-error-50:    #FFF1F2;
  --color-error-100:   #FFE4E6;
  --color-error-500:   #E11D48;
  --color-error-700:   #BE123C;

  --color-info-50:     #EFF6FF;
  --color-info-100:    #DBEAFE;
  --color-info-500:    #2563EB;
  --color-info-700:    #1D4ED8;

  /* ── Brand Aliases ── */
  --color-brand:         var(--color-primary-500);
  --color-brand-hover:   var(--color-primary-600);
  --color-brand-active:  var(--color-primary-700);
  --color-brand-subtle:  var(--color-primary-50);
  --color-brand-muted:   var(--color-primary-100);

  /* ── Foreground ── */
  --color-fg-1:         var(--color-neutral-900);
  --color-fg-2:         var(--color-neutral-700);
  --color-fg-3:         var(--color-neutral-500);
  --color-fg-4:         var(--color-neutral-400);
  --color-fg-disabled:  var(--color-neutral-300);
  --color-fg-inverse:   var(--color-neutral-0);
  --color-fg-brand:     var(--color-primary-500);

  /* ── Background ── */
  --color-bg-body:    var(--color-neutral-0);
  --color-bg-subtle:  var(--color-neutral-50);
  --color-bg-muted:   var(--color-neutral-100);
  --color-bg-overlay: rgba(22, 20, 15, 0.5);

  /* ── Border ── */
  --color-border:        var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus:  var(--color-primary-500);
}