/* ==========================================================================
   COSA Design System — CSS Custom Properties
   ADGgroup Property Management Platform
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — SN Pro (self-hosted)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'SN Pro';
  src: url('/assets/fonts/SNPro-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SN Pro';
  src: url('/assets/fonts/SNPro-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {

  /* --------------------------------------------------------------------------
     Colors — Core Palette
     -------------------------------------------------------------------------- */
  --color-bg:               #FAFAF7;
  --color-surface:          #FFFFFF;
  --color-border:           #E8E5DF;
  --color-text:             #1A1A1A;
  --color-text-muted:       #7A7A72;

  /* --------------------------------------------------------------------------
     Colors — Brand / Accent
     -------------------------------------------------------------------------- */
  --color-primary:          #2C5F8A;
  --color-primary-hover:    #1E4A6E;
  --color-primary-light:    #E8F0F7;

  /* --------------------------------------------------------------------------
     Colors — Semantic
     -------------------------------------------------------------------------- */
  --color-success:          #3A8A5C;
  --color-success-light:    #E8F5EE;

  --color-warning:          #C4922A;
  --color-warning-light:    #FFF8E8;

  --color-danger:           #B44040;
  --color-danger-light:     #FDEDED;

  /* --------------------------------------------------------------------------
     Colors — Sidebar
     -------------------------------------------------------------------------- */
  --color-sidebar:          #2B2B2B;
  --color-sidebar-hover:    #3A3A3A;
  --color-sidebar-text:     #E8E5DF;
  --color-sidebar-active:   #2C5F8A;

  /* --------------------------------------------------------------------------
     Typography — Font Families (SN Pro only)
     -------------------------------------------------------------------------- */
  --font-heading:           'SN Pro', -apple-system, 'Segoe UI', sans-serif;
  --font-body:              'SN Pro', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:              'SN Pro', -apple-system, 'Segoe UI', sans-serif;

  /* --------------------------------------------------------------------------
     Typography — Font Sizes (compact)
     -------------------------------------------------------------------------- */
  --text-xs:                0.6875rem;  /* 11px */
  --text-sm:                0.8125rem;  /* 13px */
  --text-base:              0.875rem;   /* 14px */
  --text-lg:                1rem;       /* 16px */
  --text-xl:                1.125rem;   /* 18px */
  --text-2xl:               1.375rem;   /* 22px */
  --text-3xl:               1.75rem;    /* 28px */

  /* --------------------------------------------------------------------------
     Spacing (compact)
     -------------------------------------------------------------------------- */
  --space-xs:               3px;
  --space-sm:               6px;
  --space-md:               12px;
  --space-lg:               18px;
  --space-xl:               24px;
  --space-2xl:              36px;

  /* --------------------------------------------------------------------------
     Border Radius (refined)
     -------------------------------------------------------------------------- */
  --radius-sm:              3px;
  --radius-md:              6px;
  --radius-lg:              10px;
  --radius-full:            9999px;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:              0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-lg:              0 4px 16px rgba(0, 0, 0, 0.09);

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --transition-fast:        150ms ease;
  --transition-normal:      250ms ease;

  /* --------------------------------------------------------------------------
     Layout (compact)
     -------------------------------------------------------------------------- */
  --sidebar-width:          220px;
  --sidebar-collapsed:      56px;
  --header-height:          52px;
}