/* ============================================================================
 *  HATRX — theme  (الألوان والمقاسات — زي ThemeData في Flutter)
 *  Source: Figma › 🎨 Foundations › Color
 *  غيّر اللون هنا وهيتغير في الصفحتين.
 * ========================================================================== */
:root {
  /* Backgrounds & surfaces */
  --bg:          #121212;   /* Background/Default */
  --deep:        #000000;   /* Background/Deep */
  --panel-top:   #1a1a1a;   /* Surface/Highlight Top */
  --panel:       #1f1f1f;   /* Surface/Default — cards, inputs */
  --panel-2:     #282828;   /* Surface/Raised */
  --hair:        #282828;   /* Border/Default */

  /* Brand */
  --brand:       #f2d400;   /* Brand/Primary */
  --brand-rgb:   242, 212, 0;   /* same color as R,G,B — used for glows: rgba(var(--brand-rgb), .3) */
  --brand-hover: #ffe01f;
  --brand-subtle:#3a3410;   /* Brand/Subtle */
  --on-brand:    #121212;   /* Text/On Brand */
  --gold:        #c8933f;   /* Brand/Accent */
  --oxblood:     #66231f;   /* Brand/Depth */
  --line:        rgba(var(--brand-rgb), .24);

  /* Text */
  --chalk:       #e8dcc7;   /* Text/Primary */
  --ash:         #9a9284;   /* Text/Secondary */
  --muted:       #828282;   /* Text/Tertiary */

  /* Feedback */
  --danger:      #e0574f;
  --success:     #39ea29;   /* Feedback/Success */

  /* Radius — Figma › Corner Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Font — temporary until 29LT Azer (also update the Google Fonts <link> in each page) */
  --font: "Readex Pro", system-ui, sans-serif;
}