/* ==========================================================================
   Friendly Healthcare Map - CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* ---- Primary brand colors ---- */
  --color-primary:        #0EA5A0;   /* 薄荷綠 — 友善、信任               */
  --color-primary-dark:   #065450;   /* 加深：AA on #E6F7F6 = 7.94:1 */
  --color-primary-light:  #E6F7F6;
  --color-primary-gradient: linear-gradient(135deg, #056A5C 0%, #145490 100%);

  /* ---- Secondary / accent ---- */
  --color-secondary:      #4A90D9;   /* 天空藍                             */
  --color-secondary-light:#EBF3FC;
  --color-accent:         #F5A623;   /* 暖橘 — CTA 強調                   */
  --color-accent-light:   #FFF4E0;

  /* ---- Accessibility level colors ---- */
  --color-level-A:        #0E6E3E;   /* 深綠 — 全面友善（AA on #F0F0F0: ~5.0:1）  */
  --color-level-A-bg:     #E6F9EE;
  --color-level-B:        #1A5FB4;   /* 深藍 — 部分友善（AA on #F0F0F0: ~5.2:1）  */
  --color-level-B-bg:     #E8F0FE;
  --color-level-C:        #B35C00;   /* 深橘 — 基本友善（AA on #F0F0F0: ~4.6:1）  */
  --color-level-C-bg:     #FFF4E6;
  --color-level-D:        #A31545;   /* 深桃紅 — 待加強（AA on #F0F0F0: ~5.5:1）  */
  --color-level-D-bg:     #FDE8EF;

  /* ---- Semantic UI colors ---- */
  --color-success:        #38B2AC;
  --color-warning:        #ECC94B;
  --color-orange:         #ED8936;
  --color-danger:         #FC8181;
  --color-info:           #4A90D9;
  --color-gray:           #6B7785;

  /* ---- Link colors ---- */
  --color-link:           #08706C;
  --color-link-hover:     #055550;

  /* ---- Neutral / text ---- */
  --color-bg:             #FAFBFC;
  --color-bg-secondary:   #F0F4F5;
  --color-bg-warm:        #FFF9F0;
  --color-bg-white:       #FFFFFF;
  --color-bg-overlay:     rgba(0, 0, 0, 0.45);
  --color-text:           #2D3748;
  --color-text-light:     #616E7C;
  --color-text-inverse:   #FFFFFF;
  --color-border:         #CBD5E0;
  --color-border-dark:    #6B7785;

  /* ---- Typography ---- */
  --font-family:          'Noto Sans TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.875rem;  /* 14px */
  --font-size-base:       1rem;      /* 16px */
  --font-size-md:         1.125rem;  /* 18px */
  --font-size-lg:         1.25rem;   /* 20px */
  --font-size-xl:         1.5rem;    /* 24px */
  --font-size-2xl:        2rem;      /* 32px */
  --font-size-3xl:        2.5rem;    /* 40px */
  --line-height-tight:    1.3;
  --line-height-base:     1.75;
  --line-height-relaxed:  1.85;

  /* ---- Spacing ---- */
  --space-xs:             0.25rem;   /* 4px  */
  --space-sm:             0.5rem;    /* 8px  */
  --space-md:             1rem;      /* 16px */
  --space-lg:             1.5rem;    /* 24px */
  --space-xl:             2rem;      /* 32px */
  --space-2xl:            3rem;      /* 48px */
  --space-3xl:            4rem;      /* 64px */

  /* ---- Sizes ---- */
  --header-height:        64px;
  --footer-height:        80px;
  --search-panel-width:   380px;
  --detail-panel-width:   400px;
  --icon-size-sm:         16px;
  --icon-size-md:         24px;
  --icon-size-lg:         32px;

  /* ---- Borders ---- */
  --border-radius-sm:     4px;
  --border-radius-md:     8px;
  --border-radius-lg:     12px;
  --border-radius-xl:     16px;
  --border-radius-pill:   9999px;

  /* ---- Shadows (multi-layer, softer) ---- */
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:            0 10px 25px rgba(0, 0, 0, 0.08), 0 6px 10px rgba(0, 0, 0, 0.05);
  --shadow-xl:            0 20px 40px rgba(0, 0, 0, 0.1);

  /* ---- Z-index layers ---- */
  --z-map:                1;
  --z-panel:              100;
  --z-legend:             200;
  --z-header:             500;
  --z-overlay:            600;
  --z-modal:              700;
  --z-notification:       800;
  --z-skip-link:          900;

  /* ---- Transitions ---- */
  --transition-fast:      150ms ease;
  --transition-base:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Focus ---- */
  --focus-outline-width:  3px;
  --focus-outline-color:  #FFDD00;
  --focus-outline-offset: 0px;
  --focus-bg-color:       #FFDD00;
  --focus-text-color:     #2D3748;
}

/* ==========================================================================
   Breakpoint reference (used in media queries across stylesheets):
     Mobile:  < 768px   (default / mobile-first)
     Tablet:  >= 768px
     Desktop: >= 1024px
     Wide:    >= 1280px
   ========================================================================== */