/* ==========================================================================
   VARIABLES & DESIGN TOKENS
   Portal Resmi Dinas Perikanan Kabupaten Sumenep
   Theme: Elegant, Simple, Official Navy & Maritime Blue
   ========================================================================== */

:root {
  /* --- Primary Navy & Maritime Blue Palette --- */
  --navy-950: #06101E;
  --navy-900: #0A192F;
  --navy-800: #0F2547;
  --navy-700: #163560;
  --navy-600: #1E497C;
  
  --blue-700: #1B5694;
  --blue-600: #2166AE;
  --blue-500: #2B7CD3;
  --blue-400: #4A9AE9;
  --blue-300: #7CC0F7;
  --blue-200: #BAE0FD;
  --blue-100: #E0F1FE;
  --blue-50:  #F0F7FF;

  /* --- Official Gold / Sumekar Accent Palette --- */
  --gold-700: #9A7426;
  --gold-600: #B88D32;
  --gold-500: #D4AF37;
  --gold-400: #E5C453;
  --gold-200: #F7E8B0;
  --gold-100: #FCF6DF;
  --gold-50:  #FEFBF0;

  /* --- Semantic Status Colors --- */
  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-500: #10B981;
  --emerald-100: #D1FAE5;
  --emerald-50:  #ECFDF5;

  --amber-700: #B45309;
  --amber-600: #D97706;
  --amber-500: #F59E0B;
  --amber-100: #FEF3C7;
  --amber-50:  #FFFBEB;

  --rose-700: #BE123C;
  --rose-600: #E11D48;
  --rose-500: #F43F5E;
  --rose-100: #FFE4E6;
  --rose-50:  #FFF1F2;

  /* --- Neutral & Surface Palette --- */
  --slate-950: #090E17;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;

  /* --- Semantic Assignments --- */
  --bg-body: var(--slate-50);
  --bg-surface: var(--white);
  --bg-subtle: var(--slate-100);
  --bg-navy-gradient: linear-gradient(135deg, #071326 0%, #0F2547 50%, #173B6C 100%);
  --bg-card-navy: linear-gradient(145deg, #0B1D38 0%, #15335E 100%);
  --bg-gold-gradient: linear-gradient(135deg, #C69E3B 0%, #E2C061 100%);

  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-light: var(--slate-100);

  --border-light: var(--slate-200);
  --border-subtle: #E8EEF5;
  --border-focus: var(--blue-500);

  /* --- Typography --- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* --- Layout & Spacing --- */
  --container-max: 1320px;
  --container-narrow: 1024px;
  --container-padding: 1.25rem;
  --topbar-height: 38px;
  --navbar-height: 78px;

  /* --- Border Radius --- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-full: 9999px;

  /* --- Elevations & Shadows --- */
  --shadow-xs: 0 1px 2px rgba(10, 25, 47, 0.04);
  --shadow-sm: 0 2px 8px -1px rgba(10, 25, 47, 0.06), 0 1px 3px -1px rgba(10, 25, 47, 0.04);
  --shadow-md: 0 8px 24px -4px rgba(10, 25, 47, 0.08), 0 4px 8px -4px rgba(10, 25, 47, 0.04);
  --shadow-lg: 0 16px 36px -6px rgba(10, 25, 47, 0.12), 0 6px 14px -4px rgba(10, 25, 47, 0.06);
  --shadow-xl: 0 24px 48px -10px rgba(10, 25, 47, 0.18);
  --shadow-navy: 0 12px 28px -6px rgba(15, 37, 71, 0.35);
  --shadow-gold: 0 8px 20px -4px rgba(212, 175, 55, 0.35);

  /* --- Transitions --- */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}