/* ============================================================
   Pigeon Pedigree Pro — Design Tokens & Theme
   Primary: Deep Orange (#E65100)
   ============================================================ */

:root {
  /* ── Brand Colors ───────────────────────────────────────── */
  --color-primary:         #E65100;
  --color-primary-dark:    #BF360C;
  --color-primary-light:   #FF8A50;
  --color-primary-subtle:  #FFF3E0;
  --color-primary-border:  #FFCCBC;

  /* ── Neutral Palette ────────────────────────────────────── */
  --color-white:           #FFFFFF;
  --color-off-white:       #FAFAFA;
  --color-bg:              #F5F5F5;
  --color-bg-alt:          #EEEEEE;
  --color-border:          #E0E0E0;
  --color-border-light:    #F0F0F0;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text-primary:    #1A1A1A;
  --color-text-secondary:  #555555;
  --color-text-muted:      #9E9E9E;
  --color-text-inverse:    #FFFFFF;

  /* ── Semantic Colors ────────────────────────────────────── */
  --color-success:         #2E7D32;
  --color-success-light:   #E8F5E9;
  --color-warning:         #F57F17;
  --color-warning-light:   #FFFDE7;
  --color-danger:          #C62828;
  --color-danger-light:    #FFEBEE;
  --color-info:            #1565C0;
  --color-info-light:      #E3F2FD;

  /* ── Sidebar ────────────────────────────────────────────── */
  --sidebar-bg:            #1C1C1E;
  --sidebar-text:          #B0B0B0;
  --sidebar-text-active:   #FFFFFF;
  --sidebar-active-bg:     #E65100;
  --sidebar-hover-bg:      #2C2C2E;
  --sidebar-width:         240px;
  --sidebar-collapsed:     64px;

  /* ── Topbar ─────────────────────────────────────────────── */
  --topbar-height:         60px;
  --topbar-bg:             #FFFFFF;
  --topbar-border:         #E0E0E0;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family:           'Inter', -apple-system, BlinkMacSystemFont,
                           'Segoe UI', Roboto, sans-serif;
  --font-size-xs:          11px;
  --font-size-sm:          13px;
  --font-size-base:        14px;
  --font-size-md:          15px;
  --font-size-lg:          16px;
  --font-size-xl:          18px;
  --font-size-2xl:         22px;
  --font-size-3xl:         28px;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

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

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);

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

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg);
  line-height: 1.5;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

p { margin: 0 0 var(--space-4); }

/* ── Utility Classes ───────────────────────────────────────── */
.text-primary   { color: var(--color-primary) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-success   { color: var(--color-success) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-sm        { font-size: var(--font-size-sm) !important; }
.text-xs        { font-size: var(--font-size-xs) !important; }
.fw-semibold    { font-weight: var(--font-weight-semibold) !important; }
.fw-bold        { font-weight: var(--font-weight-bold) !important; }

.d-flex         { display: flex !important; }
.d-none         { display: none !important; }
.align-center   { align-items: center !important; }
.justify-between{ justify-content: space-between !important; }
.gap-2          { gap: var(--space-2) !important; }
.gap-3          { gap: var(--space-3) !important; }
.gap-4          { gap: var(--space-4) !important; }

.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.p-0  { padding: 0 !important; }

.w-100 { width: 100% !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }