/* ============================================================
   eFin RoboLab — CSS Variables (variables.css)
   Version: 1.1
   Reference: layer1_technical_decisions_v1.1.md Section 3
   
   กฎ:
   - ห้าม hardcode สีใน HTML/CSS — ใช้ var(--*) เสมอ
   - ห้าม hardcode font — ใช้ var(--font-*) เสมอ
   - ทุก component ต้อง test ทั้ง light + dark mode
   - เปลี่ยนสี per-tenant → ใช้ ThemeConfig API inject ทับค่านี้
   ============================================================ */

/* ──────────────────────────────────────────────
   FONTS — Sarabun (Thai + Latin)
   Load via Google Fonts ใน index.html:
   <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   ────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   LIGHT MODE (default)
   ────────────────────────────────────────────── */
:root {
  /* ── Brand ── */
  --color-primary:          #1D9E75;
  --color-primary-hover:    #178A66;
  --color-primary-subtle:   rgba(29, 158, 117, 0.08);
  --color-secondary:        #085041;
  --color-secondary-hover:  #063B30;

  /* ── Status ── */
  --color-success:          #22C55E;
  --color-success-subtle:   rgba(34, 197, 94, 0.08);
  --color-warning:          #F59E0B;
  --color-warning-subtle:   rgba(245, 158, 11, 0.08);
  --color-danger:           #EF4444;
  --color-danger-subtle:    rgba(239, 68, 68, 0.08);
  --color-info:             #3B82F6;
  --color-info-subtle:      rgba(59, 130, 246, 0.08);

  /* ── Signal ── */
  --color-signal-buy:       #22C55E;
  --color-signal-sell:      #EF4444;
  --color-signal-hold:      #94A3B8;

  /* ── Certification Badges ── */
  --color-cert-bronze:      #CD7F32;
  --color-cert-bronze-bg:   rgba(205, 127, 50, 0.10);
  --color-cert-silver:      #8E9AAB;
  --color-cert-silver-bg:   rgba(142, 154, 171, 0.10);
  --color-cert-gold:        #D4A017;
  --color-cert-gold-bg:     rgba(212, 160, 23, 0.10);

  /* ── Surfaces ── */
  --color-bg:               #FFFFFF;
  --color-bg-secondary:     #F8FAFC;
  --color-bg-tertiary:      #F1F5F9;
  --color-bg-elevated:      #FFFFFF;

  /* ── Text ── */
  --color-text:             #1E293B;
  --color-text-secondary:   #475569;
  --color-text-muted:       #64748B;
  --color-text-hint:        #94A3B8;
  --color-text-inverse:     #FFFFFF;

  /* ── Borders ── */
  --color-border:           #E2E8F0;
  --color-border-hover:     #CBD5E1;
  --color-border-focus:     #1D9E75;
  --color-border-subtle:    #F1F5F9;

  /* ── Overlays ── */
  --color-overlay:          rgba(15, 23, 42, 0.5);
  --color-backdrop:         rgba(15, 23, 42, 0.3);

  /* ── PnL specific ── */
  --color-pnl-positive:     #22C55E;
  --color-pnl-negative:     #EF4444;
  --color-pnl-zero:         #64748B;

  /* ── Quota display ── */
  --color-quota-normal:     #64748B;
  --color-quota-warning:    #F59E0B;
  --color-quota-critical:   #EF4444;

  /* ──────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────── */
  --font-family:            'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --font-size-2xs:          0.625rem;   /* 10px — badge, label */
  --font-size-xs:           0.75rem;    /* 12px — caption, hint */
  --font-size-sm:           0.875rem;   /* 14px — body small */
  --font-size-base:         1rem;       /* 16px — body */
  --font-size-lg:           1.125rem;   /* 18px — subheading */
  --font-size-xl:           1.25rem;    /* 20px — heading */
  --font-size-2xl:          1.5rem;     /* 24px — page title */
  --font-size-3xl:          1.875rem;   /* 30px — hero */

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

  --line-height-tight:      1.25;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.75;

  /* ──────────────────────────────────────────────
     SPACING (4px base grid)
     ────────────────────────────────────────────── */
  --spacing-0:              0;
  --spacing-1:              0.25rem;    /* 4px */
  --spacing-2:              0.5rem;     /* 8px */
  --spacing-3:              0.75rem;    /* 12px */
  --spacing-4:              1rem;       /* 16px */
  --spacing-5:              1.25rem;    /* 20px */
  --spacing-6:              1.5rem;     /* 24px */
  --spacing-8:              2rem;       /* 32px */
  --spacing-10:             2.5rem;     /* 40px */
  --spacing-12:             3rem;       /* 48px */
  --spacing-16:             4rem;       /* 64px */

  /* ──────────────────────────────────────────────
     LAYOUT — App Shell dimensions
     ────────────────────────────────────────────── */
  --sidebar-width:          220px;
  --sidebar-collapsed-width: 56px;
  --header-height:          56px;
  --bottom-nav-height:      56px;
  --max-content-width:      1200px;
  --content-padding:        var(--spacing-5);     /* 20px desktop */
  --content-padding-mobile: var(--spacing-3);     /* 12px mobile */

  /* ──────────────────────────────────────────────
     BORDER RADIUS
     ────────────────────────────────────────────── */
  --radius-xs:              0.125rem;   /* 2px — badge */
  --radius-sm:              0.25rem;    /* 4px — input, small card */
  --radius-md:              0.5rem;     /* 8px — card, modal */
  --radius-lg:              0.75rem;    /* 12px — large card */
  --radius-xl:              1rem;       /* 16px — popup */
  --radius-full:            9999px;     /* pill, avatar */

  /* ──────────────────────────────────────────────
     SHADOWS
     ────────────────────────────────────────────── */
  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:              0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:              0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:              0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-inner:           inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* ──────────────────────────────────────────────
     TRANSITIONS
     ────────────────────────────────────────────── */
  --transition-fast:        100ms ease;
  --transition-normal:      200ms ease;
  --transition-slow:        300ms ease;
  --transition-bounce:      300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────────
     Z-INDEX SCALE
     ────────────────────────────────────────────── */
  --z-base:                 0;
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-sidebar:              300;
  --z-header:               400;
  --z-overlay:              500;
  --z-modal:                600;
  --z-toast:                700;
  --z-tooltip:              800;

  /* ──────────────────────────────────────────────
     BREAKPOINTS (reference — ใช้ใน @media queries)
     ────────────────────────────────────────────── */
  /* mobile:   < 768px  → bottom nav, stacked layout */
  /* tablet:   768-1024 → sidebar collapsed */
  /* desktop:  > 1024   → full sidebar + content */
}


/* ──────────────────────────────────────────────
   DARK MODE
   Activated by:
   1. data-theme="dark" on <html>  (user toggle)
   2. @media prefers-color-scheme   (system preference)
   ────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* ── Brand ── */
  --color-primary:          #5DCAA5;
  --color-primary-hover:    #7DD8B8;
  --color-primary-subtle:   rgba(93, 202, 165, 0.10);
  --color-secondary:        #9FE1CB;
  --color-secondary-hover:  #B5EAD7;

  /* ── Status ── */
  --color-success:          #4ADE80;
  --color-success-subtle:   rgba(74, 222, 128, 0.10);
  --color-warning:          #FBBF24;
  --color-warning-subtle:   rgba(251, 191, 36, 0.10);
  --color-danger:           #F87171;
  --color-danger-subtle:    rgba(248, 113, 113, 0.10);
  --color-info:             #60A5FA;
  --color-info-subtle:      rgba(96, 165, 250, 0.10);

  /* ── Signal ── */
  --color-signal-buy:       #4ADE80;
  --color-signal-sell:      #F87171;
  --color-signal-hold:      #64748B;

  /* ── Certification Badges (slightly brighter for dark bg) ── */
  --color-cert-bronze:      #DDA15E;
  --color-cert-bronze-bg:   rgba(221, 161, 94, 0.12);
  --color-cert-silver:      #A8B4C4;
  --color-cert-silver-bg:   rgba(168, 180, 196, 0.12);
  --color-cert-gold:        #E8C547;
  --color-cert-gold-bg:     rgba(232, 197, 71, 0.12);

  /* ── Surfaces ── */
  --color-bg:               #0F172A;
  --color-bg-secondary:     #1E293B;
  --color-bg-tertiary:      #334155;
  --color-bg-elevated:      #1E293B;

  /* ── Text ── */
  --color-text:             #F1F5F9;
  --color-text-secondary:   #CBD5E1;
  --color-text-muted:       #94A3B8;
  --color-text-hint:        #64748B;
  --color-text-inverse:     #0F172A;

  /* ── Borders ── */
  --color-border:           #334155;
  --color-border-hover:     #475569;
  --color-border-focus:     #5DCAA5;
  --color-border-subtle:    #1E293B;

  /* ── Overlays ── */
  --color-overlay:          rgba(0, 0, 0, 0.6);
  --color-backdrop:         rgba(0, 0, 0, 0.4);

  /* ── PnL ── */
  --color-pnl-positive:     #4ADE80;
  --color-pnl-negative:     #F87171;
  --color-pnl-zero:         #94A3B8;

  /* ── Shadows (stronger on dark) ── */
  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:              0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg:              0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl:              0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.2);
  --shadow-inner:           inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* System preference fallback (when user hasn't toggled manually) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    /* Same values as [data-theme="dark"] above */
    --color-primary:        #5DCAA5;
    --color-primary-hover:  #7DD8B8;
    --color-primary-subtle: rgba(93, 202, 165, 0.10);
    --color-secondary:      #9FE1CB;
    --color-bg:             #0F172A;
    --color-bg-secondary:   #1E293B;
    --color-bg-tertiary:    #334155;
    --color-bg-elevated:    #1E293B;
    --color-text:           #F1F5F9;
    --color-text-secondary: #CBD5E1;
    --color-text-muted:     #94A3B8;
    --color-text-hint:      #64748B;
    --color-border:         #334155;
    --color-border-hover:   #475569;
    --color-border-focus:   #5DCAA5;
    --color-overlay:        rgba(0, 0, 0, 0.6);
    --color-signal-buy:     #4ADE80;
    --color-signal-sell:    #F87171;
    --color-pnl-positive:   #4ADE80;
    --color-pnl-negative:   #F87171;
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:            0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}


/* ──────────────────────────────────────────────
   UTILITY CLASSES
   ใช้ใน HTML ได้เลย ไม่ต้องเขียน CSS เพิ่ม
   ────────────────────────────────────────────── */

/* Text colors */
.text-primary    { color: var(--color-primary); }
.text-success    { color: var(--color-success); }
.text-warning    { color: var(--color-warning); }
.text-danger     { color: var(--color-danger); }
.text-muted      { color: var(--color-text-muted); }
.text-hint       { color: var(--color-text-hint); }

/* Signal badges */
.signal-buy      { color: var(--color-signal-buy); }
.signal-sell     { color: var(--color-signal-sell); }
.signal-hold     { color: var(--color-signal-hold); }

/* PnL display */
.pnl-positive    { color: var(--color-pnl-positive); }
.pnl-negative    { color: var(--color-pnl-negative); }
.pnl-zero        { color: var(--color-pnl-zero); }

/* Certification badges */
.cert-bronze     { color: var(--color-cert-bronze); background: var(--color-cert-bronze-bg); }
.cert-silver     { color: var(--color-cert-silver); background: var(--color-cert-silver-bg); }
.cert-gold       { color: var(--color-cert-gold); background: var(--color-cert-gold-bg); }

/* Quota status */
.quota-normal    { color: var(--color-quota-normal); }
.quota-warning   { color: var(--color-quota-warning); }
.quota-critical  { color: var(--color-quota-critical); }

/* Status badges */
.badge-success   { color: var(--color-success); background: var(--color-success-subtle); }
.badge-warning   { color: var(--color-warning); background: var(--color-warning-subtle); }
.badge-danger    { color: var(--color-danger); background: var(--color-danger-subtle); }
.badge-info      { color: var(--color-info); background: var(--color-info-subtle); }

/* Truncate text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}