/**
 * KMHCO ERP Design System
 *
 * Design tokens for the KMHCO ERP application. Borrows the CSS custom-property
 * architecture from eom2026 while using a professional-services palette suited
 * to K M Hasan & Co., Chartered Accountants.
 *
 * Logo: static/img/kmhco-logo.png (from kmhco-website)
 * Brand: deep green + warm cream, conveying trust and precision.
 */

/* ============================================
   GLOBAL RESET
   ============================================ */

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

/* ============================================
   COLOR SYSTEM: Professional Services Palette
   ============================================ */

:root {
  /* --- Brand greens --- */
  --color-brand-700: #004d2e;  /* deepest   — footer, emphasis */
  --color-brand-600: #00663d;  /* primary   — buttons, links, focus */
  --color-brand-500: #1f7a4a;  /* mid       — hover states */
  --color-brand-400: #3d9963;  /* light     — accents, badges */
  --color-brand-300: #74b88e;  /* lighter   — subtle highlights */
  --color-brand-200: #a8d5b8;  /* pale      — disabled states */
  --color-brand-100: #d4efe0;  /* wash      — very subtle backgrounds */
  --color-brand-50:  #edf7f2;  /* tint      — page background tint */

  /* --- Warm neutrals (cream / paper) --- */
  --color-cream-50:  #fefdfb;
  --color-cream-100: #faf7f0;
  --color-cream-200: #f2ede0;
  --color-cream-300: #e6dfcc;
  --color-cream-400: #d4cbad;
  --color-cream-500: #b8ae8a;

  /* --- Ink / text --- */
  --color-ink-900: #1a1f1c;
  --color-ink-700: #3d4440;
  --color-ink-500: #5f6f66;
  --color-ink-300: #8fa098;

  /* --- UI surfaces --- */
  --color-surface-page:    var(--color-cream-100);
  --color-surface-card:    #ffffff;
  --color-surface-elevated:#ffffff;
  --color-surface-subtle:  var(--color-cream-200);
  --color-surface-hover:   var(--color-brand-50);

  /* --- Borders --- */
  --color-border-subtle:  #e6e3d8;
  --color-border-default: #d4cfc0;
  --color-border-strong:  #b0a98f;

  /* --- Status (muted professional tones) ---
     Foregrounds are tuned to meet WCAG AA (>=4.5:1) as text on their paired
     -bg token: success #197045 ~5.5:1, warning #8a6309 ~5.0:1,
     error #c0392b ~4.9:1, info #2471a3 ~4.8:1. */
  --color-status-success:         #197045;
  --color-status-success-bg:      #ecf7f0;
  --color-status-warning:         #8a6309;
  --color-status-warning-bg:      #fdf6e8;
  --color-status-error:           #c0392b;
  --color-status-error-bg:        #fdf0ef;
  --color-status-error-hover:     #a93226;
  --color-status-info:            #2471a3;
  --color-status-info-bg:         #ecf4fa;

  /* --- Data visualization accents --- */
  --color-data-teal:   #17a589;
  --color-data-gold:   #d4a017;
  --color-data-slate:  #5d6d7e;
  --color-data-rust:   #a04030;

  /* --- Brand aliases --- */
  --color-brand-primary:    var(--color-brand-600);
  --color-brand-primary-hover: var(--color-brand-500);
  --color-brand-primary-light: var(--color-brand-100);

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Code", monospace;

  --font-size-xs:   0.6875rem;   /* 11px */
  --font-size-sm:   0.8125rem;   /* 13px */
  --font-size-base: 0.9375rem;   /* 15px */
  --font-size-lg:   1.125rem;    /* 18px */
  --font-size-xl:   1.5rem;      /* 24px */
  --font-size-2xl:  2rem;        /* 32px */
  --font-size-3xl:  2.75rem;     /* 44px */
  --font-size-4xl:  3.75rem;     /* 60px */

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

  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  /* ============================================
     SPACING (4px base)
     ============================================ */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 6rem;      /* 96px */
  /* Scale intentionally skips 7, 9, 11 — use the nearest defined step. */

  /* ============================================
     CONTROL SIZING
     ============================================ */
  --control-height-md: 2.5rem;   /* 40px — default buttons, inputs, selects */
  --control-height-sm: 2rem;     /* 32px — compact controls in table rows    */
  --control-touch-min: 2.75rem;  /* 44px — minimum touch target (hit-area)   */
  --icon-size-sm: 1rem;          /* 16px — compact controls and chips        */
  --icon-size-md: 1.25rem;       /* 20px — default controls                  */
  --icon-size-lg: 1.5rem;        /* 24px — standalone shell controls only   */

  --layout-max: 1200px;          /* max centred content width in the app shell */

  /* ============================================
     BREAKPOINTS (reference only)
     ------------------------------------------------
     Custom properties cannot be used in media-query conditions, so these
     are documented here and authored as literals in min-width queries.
     Mobile-first; see docs/design/foundations.md.
       sm 480px · md 768px · lg 1024px · xl 1280px
     ============================================ */

  /* ============================================
     BORDERS & RADIUS
     ============================================ */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-thin:  1px solid var(--color-border-default);

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm:   0 1px 3px rgba(26, 31, 28, 0.06);
  --shadow-md:   0 4px 16px rgba(26, 31, 28, 0.08);
  --shadow-lg:   0 12px 40px rgba(26, 31, 28, 0.10);
  --shadow-xl:   0 24px 60px rgba(26, 31, 28, 0.12);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ============================================
   GLOBAL DEFAULTS
   ============================================ */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-surface-page);
  color: var(--color-ink-900);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: 0;
}

.site-footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  border-top: var(--border-thin);
  background: var(--color-surface-card);
  color: var(--color-ink-500);
  font-size: var(--font-size-sm);
  text-align: center;
}

.site-footer a { color: var(--color-brand-600); }