/* ============================================================
   WAZIFNI DASHBOARD — Design Tokens
   Brand: #0088C7 blue, #F68B29 orange, #003059 navy
   Light + Dark themes. Font: Cairo
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Typography Scale */
  --fs-h1:              26.87pt;
  --fs-h2:              22.4pt;
  --fs-h3:              18.66pt;
  --fs-h4:              15.56pt;
  --fs-h5:              12.96pt;
  --fs-h6:              10.8pt;
  --fs-p:               9pt;
  --fs-small:           7.5pt;
  --fs-tiny:            6.25pt;

  /* Brand (theme-independent) */
  --brand-primary:      #0088C7;
  --brand-primary-700:  #0077B3;
  --brand-navy:         #003059;
  --brand-secondary:    #F68B29;
  --brand-accent:       #FF6700;
  --brand-yellow:       #FFB43D;
  --brand-success:      #51A454;
  --brand-danger:       #FF5656;

  /* Semantic — LIGHT */
  --bg:            #EFEFEF;
  --bg-grad-a:     #EFF2F5;
  --bg-grad-b:     #E8ECF0;
  --surface:       #FFFFFF;
  --surface-2:     #F6F8FA;
  --surface-3:     #EEF2F6;
  --surface-hover: #F5FBFF;
  --border:        #E4E8EC;
  --border-strong: #D4DAE0;
  --heading:       #003059;
  --text:          #33414E;
  --muted:         #5A5A5A;
  --faint:         #8A95A0;
  --placeholder:   #ADADAD;

  --sidebar-bg:     #003059;
  --sidebar-bg-2:   #00253f;
  --sidebar-text:   rgba(255,255,255,0.66);
  --sidebar-hover:  rgba(255,255,255,0.09);
  --sidebar-active: #0088C7;
  --sidebar-border: rgba(255,255,255,0.07);

  --primary-tint:   rgba(0,136,199,0.10);
  --primary-tint-2: #E6F4FC;
  --secondary-tint: rgba(246,139,41,0.12);
  --yellow-tint:    rgba(255,180,61,0.16);
  --success-tint:   rgba(81,164,84,0.14);
  --danger-tint:    rgba(255,86,86,0.13);
  --navy-tint:      rgba(0,48,89,0.10);

  --status-pending-bg:   rgba(255,180,61,0.15);
  --status-pending-tx:   #B8860B;
  --status-scheduled-bg: rgba(122, 92, 255, 0.12);
  --status-scheduled-tx: #7A5CFF;
  --status-interview-bg: rgba(246,139,41,0.15);
  --status-interview-tx: #F68B29;
  --status-sent-bg:      rgba(0,136,199,0.15);
  --status-sent-tx:      #0088C7;
  --status-hired-bg:     rgba(212,175,55,0.15);
  --status-hired-tx:     #C9A227;
  --status-approved-bg:  rgba(81,164,84,0.15);
  --status-approved-tx:  #51A454;
  --status-rejected-bg:  rgba(255,86,86,0.15);
  --status-rejected-tx:  #FF5656;
  --status-neutral-bg:   #EFEFEF;
  --status-neutral-tx:   #5A5A5A;

  --shadow-card:     0 1px 3px rgba(16,40,64,0.06), 0 1px 2px rgba(16,40,64,0.04);
  --shadow-raised:   0 4px 16px rgba(16,40,64,0.10);
  --shadow-dropdown: 0 8px 28px rgba(16,40,64,0.16);
  --shadow-btn:      0 6px 16px rgba(0,136,199,0.28);
  --ring:           0 0 0 3px rgba(0,136,199,0.18);

  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 100px;

  --sidebar-w: 228px;  --sidebar-w-collapsed: 70px;  --topbar-h: 66px;

  --font: 'Cairo', system-ui, sans-serif;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            #0B1521;
  --bg-grad-a:     #0C1825;
  --bg-grad-b:     #0A131e;
  --surface:       #13212F;
  --surface-2:     #182838;
  --surface-3:     #1E3145;
  --surface-hover: #1A2C3E;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --heading:       #EAF1F7;
  --text:          #C5D2DD;
  --muted:         #91A1B1;
  --faint:         #6E7E8E;
  --placeholder:   #5C6B79;

  --sidebar-bg:     #07223a;
  --sidebar-bg-2:   #051a2e;
  --sidebar-text:   rgba(255,255,255,0.62);
  --sidebar-hover:  rgba(255,255,255,0.08);
  --sidebar-active: #0088C7;
  --sidebar-border: rgba(255,255,255,0.06);

  --primary-tint:   rgba(0,136,199,0.18);
  --primary-tint-2: rgba(0,136,199,0.14);
  --secondary-tint: rgba(246,139,41,0.18);
  --yellow-tint:    rgba(255,180,61,0.16);
  --success-tint:   rgba(81,164,84,0.18);
  --danger-tint:    rgba(255,86,86,0.18);
  --navy-tint:      rgba(120,170,210,0.14);

  --status-pending-bg:   rgba(255,180,61,0.18);
  --status-pending-tx:   #FFCB6B;
  --status-scheduled-bg: rgba(122, 92, 255, 0.18);
  --status-scheduled-tx: #9A85FF;
  --status-interview-bg: rgba(246,139,41,0.18);
  --status-interview-tx: #FBA75A;
  --status-sent-bg:      rgba(0,136,199,0.22);
  --status-sent-tx:      #4FB6E8;
  --status-hired-bg:     rgba(212,175,55,0.22);
  --status-hired-tx:     #E6C34A;
  --status-approved-bg:  rgba(81,164,84,0.20);
  --status-approved-tx:  #7BCB7E;
  --status-rejected-bg:  rgba(255,86,86,0.18);
  --status-rejected-tx:  #FF8585;
  --status-neutral-bg:   rgba(255,255,255,0.07);
  --status-neutral-tx:   #91A1B1;

  --shadow-card:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-raised:   0 6px 22px rgba(0,0,0,0.5);
  --shadow-dropdown: 0 10px 34px rgba(0,0,0,0.6);
  --shadow-btn:      0 6px 16px rgba(0,136,199,0.35);
  --ring:           0 0 0 3px rgba(0,136,199,0.30);
  color-scheme: dark;
}