/* ============================================================
   Makruva Design System — Design Tokens
   Source of truth untuk seluruh visual aplikasi
   ============================================================ */

:root {

  /* === BRAND PALETTE === */
  --mk-lime:     #E6FF33;
  --mk-cyan:     #24CECE;
  --mk-blue:     #128BF6;
  --mk-green:    #AEE529;

  /* === SEMANTIC COLORS — LIGHT === */
  --color-bg:              #FFFFFF;
  --color-surface:         #F4FFFE;
  --color-surface-alt:     #F7FFED;
  --color-surface-raised:  #FFFFFF;
  --color-border:          #D8F0EE;
  --color-border-light:    #EDF8F7;
  --color-border-strong:   #B0D8D4;

  --color-text:            #0A1628;
  --color-text-secondary:  #3D6272;
  --color-text-muted:      #8BA7B4;
  --color-text-disabled:   #C5D8E0;
  --color-text-inverse:    #FFFFFF;

  --color-primary:         #128BF6;
  --color-primary-hover:   #0A74D4;
  --color-primary-active:  #0860B0;
  --color-primary-light:   #EBF5FF;
  --color-primary-muted:   rgba(18,139,246,0.12);

  --color-secondary:       #24CECE;
  --color-secondary-hover: #1AAEAE;
  --color-secondary-light: #E6FAFA;

  --color-accent:          #E6FF33;
  --color-accent-hover:    #D4EE1F;
  --color-accent-text:     #1A2800;
  --color-accent-light:    #F7FFCC;

  --color-gold:            #C8B560;
  --color-gold-text:       #7A5A00;
  --color-gold-light:      #FBF6DC;

  --color-success:         #AEE529;
  --color-success-hover:   #99CC1A;
  --color-success-text:    #2A3800;
  --color-success-bg:      #F2FFCC;
  --color-success-border:  #C8F060;

  --color-warning:         #FFB830;
  --color-warning-text:    #7A4400;
  --color-warning-bg:      #FFF8E6;
  --color-warning-border:  #FFD880;

  --color-error:           #FF5252;
  --color-error-text:      #8B0000;
  --color-error-bg:        #FFF0F0;
  --color-error-border:    #FFB0B0;

  /* === GRADIENTS === */
  --gradient-hero:    linear-gradient(135deg, #0A1628 0%, #0D2040 50%, #0A3558 100%);
  --gradient-cta:     linear-gradient(135deg, #128BF6 0%, #24CECE 100%);
  --gradient-accent:  linear-gradient(135deg, #E6FF33 0%, #AEE529 100%);
  --gradient-card:    linear-gradient(135deg, #F4FFFE 0%, #F0FFF5 100%);
  --gradient-primary-soft: linear-gradient(135deg, #EBF5FF 0%, #E6FAFA 100%);

  /* === TYPOGRAPHY === */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'Roboto Mono', 'Courier New', monospace;

  --font-regular: 400;
  --font-medium:  500;
  --font-bold:    700;
  --font-black:   900;

  --text-display: 56px;  --leading-display: 1.1;   --tracking-display: -0.02em;
  --text-h1:      40px;  --leading-h1:      1.2;   --tracking-h1:      -0.01em;
  --text-h2:      32px;  --leading-h2:      1.25;  --tracking-h2:      -0.01em;
  --text-h3:      24px;  --leading-h3:      1.3;   --tracking-h3:       0em;
  --text-h4:      20px;  --leading-h4:      1.35;
  --text-h5:      18px;  --leading-h5:      1.4;
  --text-body-lg: 18px;  --leading-body-lg: 1.7;
  --text-body:    16px;  --leading-body:    1.65;
  --text-body-sm: 14px;  --leading-body-sm: 1.6;
  --text-caption: 12px;  --leading-caption: 1.5;   --tracking-caption:  0.02em;
  --text-label:   11px;  --leading-label:   1.4;   --tracking-label:    0.08em;

  /* === SPACING (8px base) === */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* === BORDER RADIUS === */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-xs: 0 1px 3px rgba(18,139,246,0.06);
  --shadow-sm: 0 2px 8px rgba(18,139,246,0.10), 0 0 0 1px rgba(18,139,246,0.04);
  --shadow-md: 0 4px 16px rgba(18,139,246,0.14), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(18,139,246,0.18), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 64px rgba(18,139,246,0.22), 0 4px 16px rgba(0,0,0,0.10);
  --shadow-card: 0 2px 12px rgba(18,139,246,0.08), 0 0 0 1px rgba(18,139,246,0.04);
  --shadow-card-hover: 0 6px 24px rgba(18,139,246,0.16), 0 0 0 1px rgba(18,139,246,0.08);

  /* === MOTION === */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX === */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-topmost:  500;

  /* === LAYOUT === */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}