/* ==========================================================================
   Hamrah Design Tokens
   Derived from hamrahcare.com (Elementor globals + computed styles, 2026-08-30)
   Single source of truth for templates/ (Django) and web/ (React).
   No raw color, spacing, or font value anywhere else.

   All text colors here meet WCAG AA (4.5:1) against their intended surface.
   ========================================================================== */

:root {
  /* --- Brand ramp -------------------------------------------------------- */
  --color-brand-50:  #E6F6F8;
  --color-brand-100: #C2EAEE;
  --color-brand-300: #5FC7D1;
  --color-brand-500: #00A5B4;  /* site primary — FILLS ONLY, 2.98:1 on white */
  --color-brand-600: #00939F;  /* fill hover                                 */
  --color-brand-700: #007D89;  /* 4.89:1 on white — safe for text            */
  --color-brand-800: #006B75;
  --color-brand-900: #004248;  /* deep teal — 11.2:1 on white                */

  /* --- Action -----------------------------------------------------------
     #00A5B4 fails contrast for text and for white-on-teal buttons.
     Interactive elements use the -700 step; -500 stays for decoration.     */
  --color-action:        var(--color-brand-700);
  --color-action-hover:  var(--color-brand-800);
  --color-action-active: #005A63;
  --color-action-subtle: var(--color-brand-50);   /* selected row, tag bg    */
  --color-fill-brand:    var(--color-brand-500);  /* bars, icons, accents    */

  /* --- Text -------------------------------------------------------------- */
  --color-text-strong:   #004248;  /* headings, emphasized values  11.2:1    */
  --color-text:          #333333;  /* body                         12.6:1    */
  --color-text-muted:    #5A7376;  /* captions, metadata            5.1:1    */
  --color-text-disabled: #B6B6B6;  /* disabled only — exempt from AA         */
  --color-text-inverse:  #FFFFFF;
  --color-text-link:     var(--color-action);

  /* --- Surfaces ---------------------------------------------------------- */
  --color-surface:          #FFFFFF;
  --color-surface-subtle:   #F7FAFB;  /* page background, table header       */
  --color-surface-brand:    #F0FAFB;  /* tinted panel                        */
  --color-surface-hover:    #F2F6F7;
  --color-surface-disabled: #F2F2F2;
  --color-border-disabled:  #E2E2E2;
  --color-overlay:          rgba(0, 66, 72, 0.58);

  /* --- Borders ----------------------------------------------------------- */
  --color-border:        #D6E1E2;
  --color-border-strong: #A9BFC1;
  --color-border-brand:  var(--color-brand-500);
  --color-focus-ring:    rgba(0, 125, 137, 0.45);

  /* --- Status -----------------------------------------------------------
     Three tokens each: -text (AA on white and on -bg), -base (icon, border,
     fill), -bg (tint). Never use -base for text.                           */
  --color-success-text: #157A55;
  --color-success:      #1F9D6B;
  --color-success-bg:   #E8F6F0;

  --color-warning-text: #8A5D00;  /* amber never passes AA — darkened text   */
  --color-warning:      #C98A00;
  --color-warning-bg:   #FDF3DF;

  --color-danger-text:  #C4453D;
  --color-danger:       #C4453D;
  --color-danger-bg:    #FBECEB;

  --color-info-text:    #2C6E9B;
  --color-info:         #2C6E9B;
  --color-info-bg:      #EAF2F8;

  --color-neutral-text: #5E6C6E;
  --color-neutral:      #6B7A7C;
  --color-neutral-bg:   #F0F2F2;

  /* --- Charts -----------------------------------------------------------
     Categorical: distinguishable in grayscale and for common CVD types.
     Use in order; never reorder between charts of the same dimension.      */
  --chart-1: #00A5B4;
  --chart-2: #004248;
  --chart-3: #E0A020;
  --chart-4: #7A5AA8;
  --chart-5: #4A8FBF;
  --chart-6: #C4453D;
  --chart-7: #5C9E6E;
  --chart-8: #B0797A;

  --chart-grid: #E4EBEC;
  --chart-axis: #5A7376;

  /* Sequential (heatmaps, density) — light to dark */
  --chart-seq-1: #E6F6F8;
  --chart-seq-2: #C2EAEE;
  --chart-seq-3: #5FC7D1;
  --chart-seq-4: #00A5B4;
  --chart-seq-5: #007D89;
  --chart-seq-6: #004248;

  /* --- Typography -------------------------------------------------------- */
  --font-sans: "IranSans", "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", monospace;

  --text-xs:   0.75rem;   /* 12px — badges, table metadata                   */
  --text-sm:   0.875rem;  /* 14px — dense tables, helper text                */
  --text-base: 1rem;      /* 16px — body                                    */
  --text-lg:   1.125rem;  /* 18px — card title, lead paragraph              */
  --text-xl:   1.25rem;   /* 20px — h3                                      */
  --text-2xl:  1.5rem;    /* 24px — h2                                      */
  --text-3xl:  1.875rem;  /* 30px — h1 (panel)                              */
  --text-4xl:  2.5rem;    /* 40px — h1 (public hero)                        */

  --leading-tight:  1.35;  /* headings — Persian needs more than Latin 1.2  */
  --leading-normal: 1.6;   /* body                                          */
  --leading-loose:  1.8;   /* long-form article text                        */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Radii ------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   15px;   /* dominant on the site — cards, inputs            */
  --radius-xl:   20px;
  --radius-pill: 999px;  /* chips, tags, avatars in lists                   */

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 66, 72, 0.06);
  --shadow-md: 0 4px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 27px 24px -2px rgba(0, 0, 0, 0.18);

  /* --- Layout ------------------------------------------------------------ */
  --control-height-sm: 32px;
  --control-height:    40px;
  --control-height-lg: 48px;
  --row-height:        48px;
  --row-height-dense:  40px;
  --container-max:     1200px;
  --sidebar-width:     260px;
  --drawer-width:      560px;

  /* Panel only (templates/) — the narrowest a queue/table screen must stay
     usable at, since operators run the panel at roughly half a widescreen
     monitor rather than maximized. Not relevant to web/.                   */
  --breakpoint-panel-half: 960px;

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration:      200ms;
  --duration-spin: 800ms;

  /* --- State -------------------------------------------------------------- */
  --opacity-disabled: 0.5;
}

/* ==========================================================================
   Dark theme
   Not shipped in Phase 1. Defined now so no screen has to be rebuilt later.
   Activated with <html data-theme="dark">. Surfaces are teal-tinted rather
   than neutral grey so the brand still reads.
   ========================================================================== */

[data-theme="dark"] {
  --color-action:        #4FC3CE;   /* light teal — dark surfaces need it    */
  --color-action-hover:  #6FD3DC;
  --color-action-active: #8FE0E7;
  --color-action-subtle: #143034;
  --color-fill-brand:    #00A5B4;

  --color-text-strong:   #F0F7F8;
  --color-text:          #DCE6E7;
  --color-text-muted:    #93AAAC;
  --color-text-disabled: #5A6A6C;
  --color-text-inverse:  #0E1A1C;
  --color-text-link:     var(--color-action);

  --color-surface:          #16262A;
  --color-surface-subtle:   #0E1A1C;
  --color-surface-brand:    #143034;
  --color-surface-hover:    #1E3236;
  --color-surface-disabled: #1B2C30;
  --color-border-disabled:  #253A3E;
  --color-overlay:          rgba(0, 0, 0, 0.66);

  --color-border:        #2C4448;
  --color-border-strong: #3E5A5E;
  --color-border-brand:  #00A5B4;
  --color-focus-ring:    rgba(79, 195, 206, 0.5);

  --color-success-text: #5FD3A2;
  --color-success:      #2FB37E;
  --color-success-bg:   #12312A;

  --color-warning-text: #E8B84B;
  --color-warning:      #C98A00;
  --color-warning-bg:   #33280D;

  --color-danger-text:  #F0918A;
  --color-danger:       #D65C53;
  --color-danger-bg:    #3A1E1C;

  --color-info-text:    #7FB6DC;
  --color-info:         #4A8FBF;
  --color-info-bg:      #162A38;

  --color-neutral-text: #A3B2B3;
  --color-neutral:      #6B7A7C;
  --color-neutral-bg:   #1E2A2B;

  --chart-grid: #2C4448;
  --chart-axis: #93AAAC;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 32px -4px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  direction: rtl;
  color-scheme: light;
}

[data-theme="dark"] html,
html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface-subtle);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-strong);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);   font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-lg);   font-weight: var(--weight-semibold); }
h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-sm);   font-weight: var(--weight-semibold); }

a { color: var(--color-text-link); }

:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.tabular { font-variant-numeric: tabular-nums; }
.code    { font-family: var(--font-mono); font-size: var(--text-sm); }

/* Panel only (templates/) — keyboard shortcut hint chip. Not used on web/. */
kbd {
  display: inline-block;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}