/**
 * RSPR Company Profile V2 - CSS Variables
 * Design System Colors & Variables
 * Date: December 2025
 */

:root {
  /* ============================================
     PRIMARY COLORS (Navy Blue)
     ============================================ */
  --primary-900: #070F17;
  --primary-800: #0E1D2E;
  --primary-700: #152C46;
  --primary-600: #1C3A5D;
  --primary-500: #234974;
  --primary-400: #395B82;
  
  --primary-300: #65809E;
  --primary-200: #91A4BA;
  --primary-100: #BDC8D5;
  --primary-50: #E9EDF1;

  /* ============================================
     SECONDARY COLORS (Teal)
     ============================================ */
  --secondary-900: #0B1F20;
  --secondary-800: #153F3F;
  --secondary-700: #205E5F;
  --secondary-600: #2A7E7E;
  --secondary-500: #359D9E;
  --secondary-400: #49A7A8;
  
  --secondary-300: #72BABB;
  --secondary-200: #9ACECF;
  --secondary-100: #C2E2E2;
  --secondary-50: #D7EBEC;

  /* ============================================
     TERTIARY COLORS (Green)
     ============================================ */
  --tertiary-900: #0F221D;
  --tertiary-800: #255848;
  --tertiary-700: #2C6756;
  --tertiary-600: #3B8A73;
  --tertiary-500: #4AAC90;
  --tertiary-400: #5CB49B;
  
  --tertiary-300: #80C5B1;
  --tertiary-200: #A5D6C8;
  --tertiary-100: #C9E6DE;
  --tertiary-50: #EDF7F4;

  /* ============================================
     GRAY SCALE
     ============================================ */
  --gray-900: #061C3D;
  --gray-800: #243752;
  --gray-700: #42526B;
  --gray-600: #6A778B;
  --gray-500: #838E9E;
  --gray-400: #9BA4B1;
  
  --gray-300: #B4BBC5;
  --gray-200: #CDD2D8;
  --gray-100: #E6E8EC;
  --gray-50: #F5F6F7;
  --white: #FFFFFF;

  /* ============================================
     INFO COLORS (Blue)
     ============================================ */
  --info-900: #02142E;
  --info-800: #04285C;
  --info-700: #073B89;
  --info-600: #094FB7;
  --info-500: #0B63E5;
  --info-400: #3C82EA;
  
  --info-300: #6DA1EF;
  --info-200: #9DC1F5;
  --info-100: #CEE0FA;
  --info-50: #F0F5FF;

  /* ============================================
     SUCCESS COLORS (Green)
     ============================================ */
  --success-900: #031F05;
  --success-800: #063D0A;
  --success-700: #0C7A13;
  --success-600: #0C7A13;
  --success-500: #0F9918;
  --success-400: #3FAD46;
  
  --success-300: #6FC274;
  --success-200: #9FD6A3;
  --success-100: #CFEBD1;
  --success-50: #E7F5E8;

  /* ============================================
     WARNING COLORS (Orange)
     ============================================ */
  --warning-900: #331B00;
  --warning-800: #663600;
  --warning-700: #995200;
  --warning-600: #CC6D00;
  --warning-500: #FF8800;
  --warning-400: #FFA033;
  
  --warning-300: #FFB866;
  --warning-200: #FFCF99;
  --warning-100: #FFE7CC;
  --warning-50: #FFF3E6;

  /* ============================================
     ERROR COLORS (Red)
     ============================================ */
  --error-900: #2E0E0E;
  --error-800: #5C1C1C;
  --error-700: #892929;
  --error-600: #B73737;
  --error-500: #E54545;
  --error-400: #EA6A6A;
  
  --error-300: #EF8F8F;
  --error-200: #F5B5B5;
  --error-100: #FADADA;
  --error-50: #FCECEC;

  /* ============================================
     THEME SPECIFIC COLORS
     ============================================ */
  --biru: #234974;
  --biru-laut: #359D9E;
  --toska: #4AAC90;
  --toska-light: #D2DFCD;

  /* ============================================
     SPACING SCALE
     ============================================ */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 6rem;      /* 96px */
  --spacing-5xl: 8rem;      /* 128px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 1rem;        /* 16px */
  --radius-xl: 1.5rem;      /* 24px */
  --radius-2xl: 2rem;       /* 32px */
  --radius-full: 9999px;    /* Full rounded */

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ============================================
     CONTAINER & BREAKPOINTS
     ============================================ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ============================================
     GRADIENT BACKGROUNDS
     ============================================ */
  --gradient-primary: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-600) 0%, var(--secondary-400) 100%);
  --gradient-tertiary: linear-gradient(135deg, var(--tertiary-600) 0%, var(--tertiary-400) 100%);
  --gradient-hero: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 50%, var(--tertiary-500) 100%);
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Jika diperlukan, bisa tambahkan dark mode variables di sini */
  }
}