/* =============================================================
   RRM Design Tokens
   Source: MonteRehab brand identity (amakarovskiy.github.io/thaigo)
   Version: 1.0
   ============================================================= */

:root {

  /* ----------------------------------------------------------
     BRAND PALETTE
     ---------------------------------------------------------- */

  /* Sage — primary accent, interactive elements, success */
  --sage:        #6b9478;
  --sage-mid:    #7fa88c;   /* hover state */
  --sage-light:  #a3bfaa;   /* disabled / subdued */
  --sage-pale:   #eaf2ec;   /* background tint */
  --sage-xpale:  #f3f8f4;   /* very light tint, hero bg */

  /* Warm — secondary accent, warnings, monetary values */
  --warm:        #c8a066;
  --warm-light:  #f2e8d5;   /* background tint */

  /* Earth — deep secondary, tertiary text */
  --earth:       #6b5540;
  --earth-dark:  #4a3b2c;

  /* Ink — primary text, sidebar background */
  --ink:         #1a2318;
  --ink-mid:     #2d3d2f;
  --ink-soft:    #5a6b5c;   /* secondary text, labels */

  /* Mist — page background */
  --mist:        #f8f6f2;

  /* White */
  --white:       #ffffff;


  /* ----------------------------------------------------------
     STATUS COLORS
     Maps to WorkWeekProcess.status enum
     ---------------------------------------------------------- */

  /* done — completed on time */
  --status-done:        #6b9478;
  --status-done-bg:     #eaf2ec;
  --status-done-border: #a3bfaa;

  /* late — completed but past due time */
  --status-late:        #c8a066;
  --status-late-bg:     #f2e8d5;
  --status-late-border: #ddb87a;

  /* problem — not_done / has execution_comment with issue */
  --status-problem:        #b85c4a;
  --status-problem-bg:     #faeae7;
  --status-problem-border: #d4806f;

  /* paused — process paused mid-execution */
  --status-paused:        #8a9ba8;
  --status-paused-bg:     #edf1f4;
  --status-paused-border: #b0bfc9;

  /* planned — not started, on schedule */
  --status-planned:        #9fa8a0;
  --status-planned-bg:     #f4f5f4;
  --status-planned-border: rgba(26,35,24,.12);

  /* in_progress — currently running (timed) */
  --status-in-progress:        #4a80c4;
  --status-in-progress-bg:     #e8f0fb;
  --status-in-progress-border: #7aaae0;

  /* cancelled */
  --status-cancelled:        rgba(26,35,24,.3);
  --status-cancelled-bg:     rgba(26,35,24,.04);
  --status-cancelled-border: rgba(26,35,24,.08);


  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', sans-serif;

  /* Scale */
  --text-xs:   0.625rem;   /* 9.4px  — labels, badges, timestamps */
  --text-sm:   0.7rem;     /* 10.5px — meta, secondary */
  --text-base: 0.82rem;    /* 12.3px — body, nav items */
  --text-md:   0.9rem;     /* 13.5px — subtitles */
  --text-lg:   1.1rem;     /* 16.5px — panel titles (serif) */
  --text-xl:   1.5rem;     /* 22.5px — detail headings */
  --text-2xl:  2rem;       /* 30px   — page title */
  --text-kpi:  2.2rem;     /* 33px   — KPI numerals */

  /* Weights */
  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* Letter spacing */
  --tracking-wide:   0.08em;
  --tracking-wider:  0.2em;
  --tracking-widest: 0.3em;


  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;


  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */

  --radius-sm:  6px;    /* badges, pills, small chips */
  --radius:     8px;    /* buttons, inputs, small cards */
  --radius-md:  10px;   /* mobile process cards */
  --radius-lg:  14px;   /* panels, main cards */
  --radius-xl:  20px;   /* full pill badges */
  --radius-full: 9999px;


  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(26,35,24,.08);
  --shadow:     0 4px 16px rgba(26,35,24,.07);
  --shadow-lg:  0 8px 32px rgba(26,35,24,.10);
  --shadow-top: 0 -2px 12px rgba(26,35,24,.06);


  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --sidebar-width:  240px;
  --topbar-height:  60px;
  --content-pad:    32px;
  --panel-pad:      22px;


  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */

  --ease:        cubic-bezier(.25,.46,.45,.94);
  --ease-out:    cubic-bezier(0,.55,.45,1);
  --duration-fast: .15s;
  --duration-base: .2s;
  --duration-slow: .3s;


  /* ----------------------------------------------------------
     BORDERS
     ---------------------------------------------------------- */

  --border-subtle:  1px solid rgba(26,35,24,.06);
  --border-soft:    1px solid rgba(26,35,24,.10);
  --border-medium:  1px solid rgba(26,35,24,.16);

  /* Dark surface borders (sidebar) */
  --border-dark-subtle: 1px solid rgba(255,255,255,.08);
}


/* =============================================================
   STATUS UTILITY CLASSES
   Apply to any container: .status-done, .status-problem, etc.
   ============================================================= */

.status-done     { --s-color: var(--status-done);     --s-bg: var(--status-done-bg);     --s-border: var(--status-done-border); }
.status-late     { --s-color: var(--status-late);     --s-bg: var(--status-late-bg);     --s-border: var(--status-late-border); }
.status-problem  { --s-color: var(--status-problem);  --s-bg: var(--status-problem-bg);  --s-border: var(--status-problem-border); }
.status-paused   { --s-color: var(--status-paused);   --s-bg: var(--status-paused-bg);   --s-border: var(--status-paused-border); }
.status-planned  { --s-color: var(--status-planned);  --s-bg: var(--status-planned-bg);  --s-border: var(--status-planned-border); }
.status-in-progress { --s-color: var(--status-in-progress); --s-bg: var(--status-in-progress-bg); --s-border: var(--status-in-progress-border); }
.status-cancelled   { --s-color: var(--status-cancelled);   --s-bg: var(--status-cancelled-bg);   --s-border: var(--status-cancelled-border); }