/* ==========================================================
   Midas — Design Tokens & Reset
   Brand: The Touch · Gold spectrum on Obsidian & Parchment
   ========================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* === Primary: Midas (Obsidian + Ink from brand assets) === */
  --teal:            #0E0C09;   /* Obsidian — sidebar bg */
  --teal-light:      #1F1A12;   /* Ink Mid — hover/elevated */
  --teal-dark:       #0A0806;   /* Deep obsidian */
  --teal-pale:       #F8F3EA;   /* Parchment — light accent bg */

  /* === Accent: Gold (brand spectrum) === */
  --gold:            #D4A843;   /* Gold 400 — master brand */
  --gold-light:      #E2BE5E;   /* Gold 300 — bright accent */
  --gold-pale:       #FDF0C0;   /* Gold 100 — highlight/shine */
  --gold-mid:        #B8902E;   /* Gold 500 — rules & icons */
  --gold-deep:       #7A5E1E;   /* Gold 600 — subtitles on dark */

  /* === Neutrals (warm-shifted for brand) === */
  --dark-gray:       #2C2418;
  --light-gray:      #8C7E6A;
  --bg:              #FFFFFF;   /* White — main content area */
  --white:           #FFFFFF;
  --border:          #E8E2D8;
  --border-light:    #F0EBE2;
  --red:             #C0392B;
  --green:           #27AE60;
  --warning:         #F39C12;

  /* === Shadows (warm-tinted) === */
  --card-shadow:     0 2px 16px rgba(14,12,9,0.06);

  /* === Status Badge Colors === */
  --status-to-be-started:     #94A3B8;
  --status-waiting-on-client: #F59E0B;
  --status-in-progress:       var(--teal);
  --status-in-review:         #3B82F6;
  --status-review-points:     #F97316;
  --status-out-for-signing:   #8B5CF6;
  --status-to-be-paid:        #EC4899;
  --status-complete:          #22C55E;
  --status-lodged:            #166534;

  /* === Layout === */
  --sidebar-width:     260px;
  --sidebar-collapsed: 60px;
  --header-height:     60px;
}

html { scroll-behavior: smooth; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--dark-gray);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--gold-mid, #B8902E); text-decoration: none; }
a:hover { color: var(--gold); }

img { max-width: 100%; display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--light-gray); }