/* ============================================================
   mCloud — Design Tokens
   styles/variables.css
   Source of truth for the mCloud Cloud Platform visual system.
   Brand: Independent. No parent-group references.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     COLOR — Brand
     -------------------------------------------------------- */
  --mc-color-primary:        #1A56DB;   /* Brand primary  */
  --mc-color-primary-hover:  #1E40AF;
  --mc-color-primary-pressed:#1E3A8A;
  --mc-color-primary-soft:   #EFF4FE;   /* Tinted surface */

  --mc-color-secondary:        #0D9488; /* Teal — supporting */
  --mc-color-secondary-hover:  #0F766E;
  --mc-color-secondary-pressed:#115E59;
  --mc-color-secondary-soft:   #E6F6F4;

  /* --------------------------------------------------------
     COLOR — Status
     -------------------------------------------------------- */
  --mc-color-success:      #16A34A;
  --mc-color-success-soft: #E7F6EC;
  --mc-color-danger:       #DC2626;
  --mc-color-danger-soft:  #FCEAEA;
  --mc-color-warning:      #D97706;
  --mc-color-warning-soft: #FDF2E3;
  --mc-color-info:         #2563EB;
  --mc-color-info-soft:    #E8EFFD;

  /* --------------------------------------------------------
     COLOR — Neutrals & Surfaces
     -------------------------------------------------------- */
  --mc-color-bg:           #F9FAFB;     /* App background  */
  --mc-color-surface:      #FFFFFF;     /* Cards, panels   */
  --mc-color-surface-alt:  #F3F4F6;     /* Subtle surface  */
  --mc-color-border:       #E5E7EB;
  --mc-color-border-strong:#D1D5DB;

  --mc-color-text:           #111827;   /* Primary text    */
  --mc-color-text-secondary: #4B5563;
  --mc-color-text-muted:     #6B7280;
  --mc-color-text-inverse:   #FFFFFF;
  --mc-color-text-link:      #1A56DB;

  /* --------------------------------------------------------
     TYPOGRAPHY — Font families
     Noto Sans Myanmar is the primary script; Inter is the
     Latin fallback. Padauk is the secondary Myanmar fallback.
     -------------------------------------------------------- */
  --mc-font-family-base:
    'Noto Sans Myanmar', Padauk, sans-serif;
  --mc-font-family-latin:
    'Inter', 'Noto Sans Myanmar', Padauk, sans-serif;
  --mc-font-family-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --------------------------------------------------------
     TYPOGRAPHY — Scale
     Mobile-first; H1 scales 28 → 40 at the desktop breakpoint.
     -------------------------------------------------------- */
  --mc-font-size-h1-mobile:  28px;
  --mc-font-size-h1-desktop: 40px;
  --mc-font-size-h2:         24px;
  --mc-font-size-h3:         20px;
  --mc-font-size-h4:         18px;
  --mc-font-size-body:       16px;
  --mc-font-size-body-sm:    14px;
  --mc-font-size-caption:    12px;

  /* --------------------------------------------------------
     TYPOGRAPHY — Weight
     -------------------------------------------------------- */
  --mc-font-weight-regular:  400;
  --mc-font-weight-medium:   500;
  --mc-font-weight-semibold: 600;
  --mc-font-weight-bold:     700;

  /* --------------------------------------------------------
     TYPOGRAPHY — Line height
     Enforced 1.8 baseline due to Myanmar script ascenders/
     descenders. Tight variants are reserved for display only.
     -------------------------------------------------------- */
  --mc-line-height-base:    1.8;   /* MANDATORY for body  */
  --mc-line-height-heading: 1.6;   /* H2–H4               */
  --mc-line-height-display: 1.3;   /* H1 / hero only      */

  /* --------------------------------------------------------
     SPACING — 4px base unit
     -------------------------------------------------------- */
  --mc-space-1:   4px;
  --mc-space-2:   8px;
  --mc-space-3:  12px;
  --mc-space-4:  16px;
  --mc-space-5:  24px;
  --mc-space-6:  32px;
  --mc-space-7:  48px;
  --mc-space-8:  64px;

  /* --------------------------------------------------------
     RADIUS
     -------------------------------------------------------- */
  --mc-radius-sm:   4px;
  --mc-radius-md:   8px;
  --mc-radius-lg:  12px;
  --mc-radius-xl:  16px;
  --mc-radius-pill:999px;

  /* --------------------------------------------------------
     ELEVATION
     -------------------------------------------------------- */
  --mc-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --mc-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --mc-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.10);

  /* --------------------------------------------------------
     INTERACTION — Touch target
     Minimum hit area for ALL interactive elements.
     -------------------------------------------------------- */
  --mc-touch-target-min: 48px;     /* MANDATORY: 48 x 48 */

  /* --------------------------------------------------------
     LAYOUT — Breakpoint
     -------------------------------------------------------- */
  --mc-breakpoint-desktop: 1024px;
}

/* ============================================================
   Global type baseline.
   Applied automatically when variables.css is imported.
   ============================================================ */
html, body {
  font-family: var(--mc-font-family-base);
  font-size: var(--mc-font-size-body);
  line-height: var(--mc-line-height-base);
  color: var(--mc-color-text);
  background: var(--mc-color-bg);
}

h1 {
  font-size: var(--mc-font-size-h1-mobile);
  line-height: var(--mc-line-height-display);
  font-weight: var(--mc-font-weight-bold);
}
@media (min-width: 1024px) {
  h1 {
    font-size: var(--mc-font-size-h1-desktop);
  }
}
h2 { font-size: var(--mc-font-size-h2); line-height: var(--mc-line-height-heading); font-weight: 700; }
h3 { font-size: var(--mc-font-size-h3); line-height: var(--mc-line-height-heading); font-weight: 600; }
h4 { font-size: var(--mc-font-size-h4); line-height: var(--mc-line-height-heading); font-weight: 600; }