/* Chai AlJalsa — CSS design tokens */

:root {
  /* Ember red */
  --red-50:  #faece9;
  --red-100: #f1d6d2;
  --red-200: #e0aba6;
  --red-300: #cd7a74;
  --red-400: #b34741;
  --red-500: #911c1b;
  --red-600: #7d1817;
  --red-700: #661312;
  --red-800: #4d0f0e;
  --red-900: #350a09;

  /* Ink */
  --ink-900: #000000;
  --ink-800: #15110f;
  --ink-700: #241f1b;
  --ink-600: #3a332d;
  --ink-500: #564e46;

  /* Sand */
  --sand-700: #7d7b6f;
  --sand-600: #97958a;
  --sand-500: #b0afa2;
  --sand-400: #c3c3b7;
  --sand-300: #d4d3c9;
  --sand-200: #e4e2d9;
  --sand-100: #efece4;
  --paper:    #f4f2ea;
  --white:    #ffffff;

  /* Support */
  --success: #4f7a4e;
  --warning: #c98a2b;
  --info:    #6b5d8f;

  /* Surfaces */
  --bg-page:        var(--paper);
  --bg-page-alt:    var(--sand-100);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--sand-100);
  --surface-ink:    var(--ink-900);
  --surface-ember:  var(--red-500);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--sand-700);
  --text-inverse:  var(--paper);
  --text-on-ember: var(--paper);
  --text-brand:    var(--red-500);

  /* Lines */
  --border:        var(--sand-300);
  --border-strong: var(--ink-900);
  --border-ember:  var(--red-500);
  --divider:       var(--sand-200);

  /* Interactive */
  --accent:         var(--red-500);
  --accent-hover:   var(--red-600);
  --accent-pressed: var(--red-700);
  --on-accent:      var(--paper);
  --focus-ring:     var(--red-500);

  /* Fonts */
  --font-display: 'Reem Kufi', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale */
  --fs-display: 4rem;
  --fs-h1:      2.75rem;
  --fs-h2:      2rem;
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-lg:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-wider:  0.16em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --container:        1200px;
  --container-narrow: 760px;
  --gutter:           var(--space-5);

  --control-h-sm: 36px;
  --control-h:    44px;
  --control-h-lg: 54px;

  /* Radii */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* Border widths */
  --bw-hair: 1px;
  --bw:      1.5px;
  --bw-bold: 3px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(21,17,15,.06);
  --shadow-sm: 0 2px 6px rgba(21,17,15,.08);
  --shadow-md: 0 6px 18px rgba(21,17,15,.10);
  --shadow-lg: 0 16px 40px rgba(21,17,15,.14);
  --focus-shadow: 0 0 0 3px rgba(145,28,27,.30);

  /* Motion */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.45,0,.2,1);
  --dur-fast:   120ms;
  --dur:        200ms;
  --dur-slow:   360ms;
}