/* ============================================================
   AGS Property & Investment — CSS Design Tokens
   Import this FIRST in every stylesheet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Brand Colours ─────────────────────────────────────────── */
  --color-primary:         #0F2554;   /* Deep navy */
  --color-primary-light:   #1A3A7C;   /* Royal blue */
  --color-primary-dark:    #081840;   /* Darker navy */
  --color-primary-50:      #EEF2FF;   /* Lightest tint */
  --color-primary-100:     #C7D2FE;
  --color-primary-200:     #A5B4FC;

  --color-accent:          #C9951A;   /* Gold */
  --color-accent-light:    #E8B84B;
  --color-accent-dark:     #A67A10;
  --color-accent-bg:       #FEF9EC;

  --color-success:         #16A34A;
  --color-success-bg:      #F0FDF4;
  --color-danger:          #DC2626;
  --color-danger-bg:       #FEF2F2;
  --color-warning:         #D97706;
  --color-warning-bg:      #FFFBEB;
  --color-info:            #0284C7;
  --color-info-bg:         #F0F9FF;

  /* ── Neutral Scale ─────────────────────────────────────────── */
  --color-white:      #FFFFFF;
  --color-gray-50:    #F8FAFC;
  --color-gray-100:   #F1F5F9;
  --color-gray-200:   #E2E8F0;
  --color-gray-300:   #CBD5E1;
  --color-gray-400:   #94A3B8;
  --color-gray-500:   #64748B;
  --color-gray-600:   #475569;
  --color-gray-700:   #334155;
  --color-gray-800:   #1E293B;
  --color-gray-900:   #0F172A;

  /* ── Semantic ──────────────────────────────────────────────── */
  --color-text-primary:   #111827;
  --color-text-secondary: #4B5563;
  --color-text-muted:     #9CA3AF;
  --color-text-disabled:  #D1D5DB;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F8FAFC;
  --color-bg-dark:        var(--color-primary);
  --color-border:         #E5E7EB;
  --color-border-focus:   var(--color-primary-light);
  --color-surface:        #FFFFFF;
  --color-surface-raised: #F9FAFB;

  /* ── Typography ────────────────────────────────────────────── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;
  --font-black:    900;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Border Radius ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
  --shadow-card: 0 2px 16px rgba(15,37,84,0.08);
  --shadow-card-hover: 0 8px 32px rgba(15,37,84,0.16);
  --shadow-nav:  0 2px 20px rgba(0,0,0,0.08);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ────────────────────────────────────────────────── */
  --container-max:   1280px;
  --container-wide:  1440px;
  --container-narrow: 900px;
  --nav-height:      72px;
  --sidebar-width:   260px;

  /* ── Z-index ───────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:200;
  --z-sticky:  400;
  --z-overlay: 600;
  --z-modal:   800;
  --z-toast:   1000;
}