/* ============================================================
   SIMPLE PRO DESIGN SYSTEM — app_tokens.css
   Operational SaaS layer — dashboard, jobs, schedule, invoices
   Separate from marketing tokens in colors_and_type.css
   ============================================================ */

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

/* ------------------------------------------------------------
   APP COLOR TOKENS
   ------------------------------------------------------------ */
:root {
  /* ── Backgrounds ── */
  --app-bg:           #f7f7f8;   /* Main app canvas — soft neutral, not white */
  --app-surface:      #ffffff;   /* Cards, panels, drawers */
  --app-surface-2:    #f2f2f4;   /* Nested / secondary surfaces */
  --app-surface-3:    #eaeaec;   /* Hover rows, grouped panels */

  /* ── Borders & Dividers ── */
  --app-border:       rgba(0, 0, 0, 0.08);   /* Default border */
  --app-border-strong: rgba(0, 0, 0, 0.14);  /* Section dividers */
  --app-divider:      rgba(0, 0, 0, 0.05);   /* Table row separators */

  /* ── Text ── */
  --app-text-primary:   #111113;   /* Headings, key labels */
  --app-text-secondary: #5c5c66;   /* Supporting text, timestamps */
  --app-text-tertiary:  #9696a0;   /* Placeholders, empty states */
  --app-text-inverse:   #ffffff;   /* Text on dark/colored fills */

  /* ── Accent (Interactive) ── */
  --app-accent:         #0071e3;   /* Primary CTA, links, focus */
  --app-accent-hover:   #0062c4;
  --app-accent-subtle:  #e8f2fd;   /* Accent tinted background */
  --app-accent-text:    #004eaa;   /* Accent text on light */

  /* ── Semantic: Success ── */
  --app-success:        #1a9e5c;   /* Paid, completed, approved */
  --app-success-hover:  #158a4f;
  --app-success-subtle: #e6f7ef;
  --app-success-text:   #0f6b3c;

  /* ── Semantic: Warning ── */
  --app-warning:        #d97706;   /* Overdue, attention needed */
  --app-warning-hover:  #b86405;
  --app-warning-subtle: #fef3e2;
  --app-warning-text:   #92520a;

  /* ── Semantic: Danger ── */
  --app-danger:         #dc2626;   /* Canceled, failed, past due */
  --app-danger-hover:   #b91c1c;
  --app-danger-subtle:  #fef2f2;
  --app-danger-text:    #991b1b;

  /* ── Semantic: Info ── */
  --app-info:           #2563eb;   /* Scheduled, in progress */
  --app-info-hover:     #1d4ed8;
  --app-info-subtle:    #eff6ff;
  --app-info-text:      #1e40af;

  /* ── Semantic: Neutral / Draft ── */
  --app-neutral:        #6b7280;
  --app-neutral-subtle: #f3f4f6;
  --app-neutral-text:   #374151;

  /* ── Belle AI ── */
  --belle-accent:       #7c3aed;   /* Belle purple */
  --belle-hover:        #6d28d9;
  --belle-subtle:       #f5f0ff;
  --belle-text:         #4c1d95;
  --belle-border:       rgba(124, 58, 237, 0.2);

  /* ── Selection / Active ── */
  --app-selected-bg:    #e8f2fd;
  --app-selected-border: #0071e3;

  /* ── Sidebar ── */
  --app-sidebar-bg:     #1a1a1c;
  --app-sidebar-text:   rgba(255,255,255,0.75);
  --app-sidebar-active: rgba(255,255,255,0.1);
  --app-sidebar-icon:   rgba(255,255,255,0.45);
}

/* ------------------------------------------------------------
   APP TYPOGRAPHY — Inter-first, operational
   ------------------------------------------------------------ */
:root {
  --app-font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Display — used sparingly on dashboard / splash moments */
  --app-display-size:    2rem;       /* 32px */
  --app-display-weight:  600;
  --app-display-lh:      1.15;
  --app-display-ls:      -0.02em;

  /* Page title */
  --app-title-size:    1.375rem;   /* 22px */
  --app-title-weight:  600;
  --app-title-lh:      1.25;
  --app-title-ls:      -0.015em;

  /* Section heading */
  --app-heading-size:  1.0625rem;  /* 17px */
  --app-heading-weight: 600;
  --app-heading-lh:    1.35;
  --app-heading-ls:    -0.01em;

  /* Table / form label */
  --app-label-size:    0.8125rem;  /* 13px */
  --app-label-weight:  500;
  --app-label-lh:      1.4;
  --app-label-ls:      0;          /* No negative tracking at 13px — readability first */

  /* Body — comfortable for dense UI */
  --app-body-size:     0.875rem;   /* 14px */
  --app-body-weight:   400;
  --app-body-lh:       1.55;       /* Taller than Apple's 1.47 for dense surfaces */
  --app-body-ls:       -0.005em;

  /* Body Medium */
  --app-body-med-weight: 500;

  /* Caption / timestamp */
  --app-caption-size:  0.75rem;    /* 12px */
  --app-caption-weight: 400;
  --app-caption-lh:    1.45;
  --app-caption-ls:    0;

  /* Micro */
  --app-micro-size:    0.6875rem;  /* 11px */
  --app-micro-weight:  500;
  --app-micro-lh:      1.4;
  --app-micro-ls:      0.01em;     /* Tiny positive tracking at 11px for legibility */

  /* Tabular numbers — for money, dates, counts */
  --app-tabular: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   APP SPACING SCALE (8px base)
   ------------------------------------------------------------ */
:root {
  --app-space-1:  4px;
  --app-space-2:  8px;
  --app-space-3:  12px;
  --app-space-4:  16px;
  --app-space-5:  20px;
  --app-space-6:  24px;
  --app-space-7:  32px;
  --app-space-8:  40px;
  --app-space-9:  48px;
  --app-space-10: 64px;
}

/* ------------------------------------------------------------
   APP BORDER RADIUS — slightly warmer than marketing
   ------------------------------------------------------------ */
:root {
  --app-radius-sm:   6px;
  --app-radius-md:   10px;   /* Inputs, buttons */
  --app-radius-lg:   12px;   /* Cards */
  --app-radius-xl:   14px;   /* Drawers, modals */
  --app-radius-pill: 999px;  /* Chips, badges, pills */
}

/* ------------------------------------------------------------
   APP SHADOW SYSTEM
   ------------------------------------------------------------ */
:root {
  --app-shadow-sm:  0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --app-shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --app-shadow-lg:  0 10px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --app-shadow-drawer: -8px 0 32px rgba(0,0,0,0.12);
  --app-shadow-cmd: 0 24px 64px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.1);
}

/* ------------------------------------------------------------
   STATUS BADGE CLASSES
   ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--app-font);
  font-size: var(--app-micro-size);
  font-weight: var(--app-micro-weight);
  letter-spacing: var(--app-micro-ls);
  padding: 3px 8px;
  border-radius: var(--app-radius-pill);
  white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-success { background: var(--app-success-subtle); color: var(--app-success-text); }
.badge-success .badge-dot { background: var(--app-success); }
.badge-warning { background: var(--app-warning-subtle); color: var(--app-warning-text); }
.badge-warning .badge-dot { background: var(--app-warning); }
.badge-danger  { background: var(--app-danger-subtle);  color: var(--app-danger-text); }
.badge-danger  .badge-dot { background: var(--app-danger); }
.badge-info    { background: var(--app-info-subtle);    color: var(--app-info-text); }
.badge-info    .badge-dot { background: var(--app-info); }
.badge-neutral { background: var(--app-neutral-subtle); color: var(--app-neutral-text); }
.badge-neutral .badge-dot { background: var(--app-neutral); }
.badge-belle   { background: var(--belle-subtle); color: var(--belle-text); }
.badge-belle   .badge-dot { background: var(--belle-accent); }

/* ------------------------------------------------------------
   APP BASE RESET
   ------------------------------------------------------------ */
.app-root {
  font-family: var(--app-font);
  font-size: var(--app-body-size);
  font-weight: var(--app-body-weight);
  line-height: var(--app-body-lh);
  letter-spacing: var(--app-body-ls);
  background: var(--app-bg);
  color: var(--app-text-primary);
  -webkit-font-smoothing: antialiased;
}