/*
 * tokens.css — Bank ABC Portal API Sandbox
 * Semantic Design Tokens | Sesi 9 V1.1 Refactor
 *
 * Hierarki:
 *   1. Brand, 2. Surface, 3. Text, 4. Status
 *   5. Persona (LOCKED), 6. F-03 (LOCKED)
 *   7. Typography, 8. Spacing, 9. Layout
 *   10. Radius, Shadow, Transition, Z-index
 *   11. Backward-compat aliases (V1 → V1.1)
 *
 * RULE: Semua keputusan visual lewat token ini.
 * Tidak ada hardcoded hex di file lain.
 */

:root {

  /* ─── 1. BRAND ──────────────────────────────────────────── */
  --brand-primary:        #003D79;
  --brand-primary-hover:  #002F5E;
  --brand-primary-subtle: #E3F0FF;
  --brand-accent:         #FFC72C;
  --brand-accent-hover:   #E5B321;
  --brand-accent-subtle:  #FFF8E1;

  /* ─── 2. SURFACE ────────────────────────────────────────── */
  --surface-canvas: #F8FAFC;
  --surface-card:   #FFFFFF;
  --surface-subtle: #F1F5F9;
  --surface-muted:  #E2E8F0;

  /* ─── 3. TEXT ───────────────────────────────────────────── */
  --text-primary:    #0F172A;
  --text-secondary:  #475569;
  --text-tertiary:   #94A3B8;
  --text-inverse:    #FFFFFF;
  --text-on-brand:   #FFFFFF;
  --text-on-accent:  #1A1A1A;
  --text-link:       #003D79;
  --text-link-hover: #002F5E;

  /* ─── 4. STATUS ─────────────────────────────────────────── */
  --status-success:        #16A34A;
  --status-success-bg:     #F0FDF4;
  --status-success-border: #BBF7D0;
  --status-warning:        #D97706;
  --status-warning-bg:     #FFFBEB;
  --status-warning-border: #FED7AA;
  --status-danger:         #DC2626;
  --status-danger-bg:      #FEF2F2;
  --status-danger-border:  #FECACA;
  --status-info:           #0284C7;
  --status-info-bg:        #F0F9FF;
  --status-info-border:    #BAE6FD;

  /* Environment badge text — amber-800, WCAG 6.5:1 on --brand-accent-subtle */
  --env-badge-text: #92400E;

  /* ─── 5. PERSONA TAXONOMY — LOCKED ─────────────────────── */
  --persona-p1-bg:        #E3F2FD;
  --persona-p1-border:    #64B5F6;
  --persona-p1-icon-bg:   #BBDEFB;
  --persona-p1-icon-fg:   #1565C0;
  --persona-p1-cta:       #1565C0;
  --persona-p1-cta-hover: #0D47A1;

  --persona-p2-bg:        #FFF3E0; /* = --f03-bg, intentional */
  --persona-p2-border:    #FF9800; /* = --f03-border, intentional */
  --persona-p2-icon-bg:   #FFE0B2;
  --persona-p2-icon-fg:   #E65100;
  --persona-p2-cta:       #E65100;
  --persona-p2-cta-hover: #BF360C;

  --persona-p3-bg:        #F3E5F5;
  --persona-p3-border:    #AB47BC;
  --persona-p3-icon-bg:   #E1BEE7;
  --persona-p3-icon-fg:   #6A1B9A;
  --persona-p3-cta:       #6A1B9A;
  --persona-p3-cta-hover: #4A148C;

  /* ─── 6. F-03 PROGRESS TRACKER — LOCKED ────────────────── */
  --f03-bg:     #FFF3E0;
  --f03-border: #FF9800;
  --f03-text:   #E65100;
  --f03-accent: #F57C00;

  /* ─── 7. TYPOGRAPHY ─────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ─── 8. SPACING — 4px base ─────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── 9. LAYOUT ─────────────────────────────────────────── */
  --top-bar-height:     56px;
  --sidebar-width:      240px;
  --sidebar-collapsed:  64px;
  --canvas-max-width:   1440px;
  --canvas-pad-desktop: 32px;
  --canvas-pad-mobile:  16px;
  --content-max-width:  1080px;

  /* ─── 10. RADIUS, SHADOW, TRANSITION, Z-INDEX ───────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.1), 0 10px 10px rgba(15, 23, 42, 0.04);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  --z-base:    0;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   10000;

  /* ─── 11. BACKWARD-COMPAT ALIASES — V1 → V1.1 ──────────────
   * Supaya 46 file existing (Sesi 1-8) tidak rusak total
   * selama Sesi 10-13 refactor screen bertahap.
   * Hapus section ini setelah semua screen di-refactor (Sesi 14).
   */

  /* Brand */
  --color-primary-50:  #E3F0FF;
  --color-primary-100: #C5D4E7;
  --color-primary-200: #9FB8D8;
  --color-primary-300: #6E94C3;
  --color-primary-400: #4A77B0;
  --color-primary-500: #2B5C9A;
  --color-primary-600: var(--brand-primary);
  --color-primary-700: var(--brand-primary-hover);
  --color-primary-800: #002354;
  --color-primary-900: #001640;

  --color-accent-300: #FFE08A;
  --color-accent-400: #FFD35A;
  --color-accent-500: var(--brand-accent);
  --color-accent-600: var(--brand-accent-hover);
  --color-accent-700: #B38700;

  /* Status */
  --color-success-50:  var(--status-success-bg);
  --color-success-100: var(--status-success-border);
  --color-success-500: var(--status-success);
  --color-success-700: #047857;
  --color-success-900: #064E3B;

  --color-warning-50:  var(--status-warning-bg);
  --color-warning-100: var(--status-warning-border);
  --color-warning-500: var(--status-warning);
  --color-warning-700: #B45309;
  --color-warning-900: #78350F;

  --color-danger-50:  var(--status-danger-bg);
  --color-danger-100: var(--status-danger-border);
  --color-danger-500: var(--status-danger);
  --color-danger-700: #B91C1C;
  --color-danger-900: #7F1D1D;

  --color-info-50:  var(--status-info-bg);
  --color-info-100: var(--status-info-border);
  --color-info-500: var(--status-info);
  --color-info-700: #1D4ED8;
  --color-info-900: #1E3A8A;

  /* Neutral (preserved scale) */
  --color-neutral-50:  var(--surface-canvas);
  --color-neutral-100: var(--surface-subtle);
  --color-neutral-200: var(--surface-muted);
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: var(--text-tertiary);
  --color-neutral-500: #64748B;
  --color-neutral-600: var(--text-secondary);
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: var(--text-primary);

  /* Text */
  --color-text-primary:    var(--text-primary);
  --color-text-secondary:  var(--text-secondary);
  --color-text-tertiary:   var(--text-tertiary);
  --color-text-disabled:   #CBD5E1;
  --color-text-inverse:    var(--text-inverse);
  --color-text-link:       var(--text-link);
  --color-text-link-hover: var(--text-link-hover);

  /* Surface */
  --color-surface-base:    var(--surface-canvas);
  --color-surface-raised:  var(--surface-card);
  --color-surface-overlay: rgba(15, 23, 42, 0.5);
  --color-surface-sunken:  var(--surface-subtle);
  --color-surface-sidebar: var(--surface-card); /* V1.1: sidebar putih, bukan biru */

  /* Border */
  --color-border-subtle:  var(--surface-muted);
  --color-border-default: #CBD5E1;
  --color-border-strong:  var(--brand-primary);

  /* Typography aliases */
  --type-display:  var(--text-4xl);
  --type-h1:       var(--text-3xl);
  --type-h2:       var(--text-2xl);
  --type-h3:       var(--text-xl);
  --type-body-lg:  var(--text-lg);
  --type-body-md:  var(--text-base);
  --type-body-sm:  var(--text-sm);
  --type-label:    var(--text-sm);
  --type-caption:  var(--text-xs);
  --type-code:     var(--text-sm);

  --weight-normal:   var(--font-regular);
  --weight-medium:   var(--font-medium);
  --weight-semibold: var(--font-semibold);
  --weight-bold:     var(--font-bold);

  /* Radius aliases */
  --radius-xs: var(--radius-sm);

  /* Shadow alias */
  --shadow-flat: none;

  /* Motion aliases (duration only) */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;

  /* Persona LOCKED aliases */
  --color-persona-p1-bg:        var(--persona-p1-bg);
  --color-persona-p1-border:    var(--persona-p1-border);
  --color-persona-p1-hover:     #1E88E5;
  --color-persona-p1-icon-bg:   var(--persona-p1-icon-bg);
  --color-persona-p1-icon-fg:   var(--persona-p1-icon-fg);
  --color-persona-p1-cta:       var(--persona-p1-cta);
  --color-persona-p1-cta-hover: var(--persona-p1-cta-hover);

  --color-persona-p2-bg:        var(--persona-p2-bg);
  --color-persona-p2-border:    var(--persona-p2-border);
  --color-persona-p2-hover:     #F57C00;
  --color-persona-p2-icon-bg:   var(--persona-p2-icon-bg);
  --color-persona-p2-icon-fg:   var(--persona-p2-icon-fg);
  --color-persona-p2-cta:       var(--persona-p2-cta);
  --color-persona-p2-cta-hover: var(--persona-p2-cta-hover);

  --color-persona-p3-bg:        var(--persona-p3-bg);
  --color-persona-p3-border:    var(--persona-p3-border);
  --color-persona-p3-hover:     #8E24AA;
  --color-persona-p3-icon-bg:   var(--persona-p3-icon-bg);
  --color-persona-p3-icon-fg:   var(--persona-p3-icon-fg);
  --color-persona-p3-cta:       var(--persona-p3-cta);
  --color-persona-p3-cta-hover: var(--persona-p3-cta-hover);

  /* F-03 LOCKED aliases */
  --color-f03-bg:     var(--f03-bg);
  --color-f03-border: var(--f03-border);
  --color-f03-text:   var(--f03-text);
  --color-f03-accent: var(--f03-accent);

  /* Layout aliases — VALUES BERUBAH intentional */
  --layout-max-width:  var(--canvas-max-width);  /* 1200 → 1440 */
  --layout-sidebar-w:  var(--sidebar-width);     /* 256 → 240 */
  --layout-header-h:   var(--top-bar-height);    /* 64 → 56 */
  --layout-content-px: var(--canvas-pad-desktop);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:      0ms;
    --motion-base:      0ms;
    --motion-slow:      0ms;
    --transition-fast:  0ms;
    --transition-base:  0ms;
    --transition-slow:  0ms;
  }
}