/* ==========================================================================
   DCHAT — Design Tokens
   Source: Resources/Themes/{LightTheme,DarkTheme}.xaml + Styles/Styles.xaml
   ========================================================================== */

/* -------- Fonts (packaged with the .NET MAUI app) ------------------------- */
@font-face {
  font-family: 'OpenSans';
  src: url('./fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('./fonts/OpenSans-Semibold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('./fonts/Cairo-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NotoSansArabic';
  src: url('./fonts/NotoSansArabic-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FA6Solid';
  src: url('./fonts/fa-solid-900.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FA6Regular';
  src: url('./fonts/fa-regular-400.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FA6Brands';
  src: url('./fonts/fa-brands-400.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* -------- LIGHT theme (default) ------------------------------------------- */
:root, [data-theme="light"] {
  /* Brand / accent ---------------------------------------------------------*/
  --dc-accent:               #2196F3;   /* Material Blue — primary action */
  --dc-accent-secondary:     #64B5F6;
  --dc-accent-hover:         #1976D2;
  --dc-ios-blue:             #007AFF;   /* iOS accent used in inputs */
  --dc-ios-blue-deep:        #0056CC;

  /* Signature brand gradient — sampled from DChat logo (top→bottom) */
  --dc-brand-cyan:           #35B5EC;   /* top of bubble */
  --dc-brand-blue:           #3F76ED;   /* upper belly */
  --dc-brand-indigo:         #423EED;   /* mid / lower belly */
  --dc-brand-violet:         #6A2EEE;   /* tail */
  --dc-gradient-brand:       linear-gradient(
                               to top,
                               #6A2EEE 0%,
                               #423EED 40%,
                               #3F76ED 70%,
                               #35B5EC 100%);
  --dc-gradient-accent:      linear-gradient(135deg, #2196F3 0%, #64B5F6 100%);
  --dc-gradient-teal-blue:   linear-gradient(
                               to top right,
                               #138CAA 0%, #2697C3 50%, #45A3E3 100%);
  --dc-gradient-send:        linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
  --dc-gradient-voice:       linear-gradient(135deg, #FF3B30 0%, #D70015 100%);
  --dc-gradient-attach:      linear-gradient(135deg, #34C759 0%, #28A745 100%);

  /* Backgrounds ------------------------------------------------------------*/
  --dc-bg-primary:           #FFFFFF;
  --dc-bg-secondary:         #F5F5F5;
  --dc-bg-tertiary:          #EEEEEE;
  --dc-bg-surface:           #FAFAFA;
  --dc-bg-charcoal:          #F8F8F8;
  --dc-bg-overlay:           rgba(112,112,112,.55);
  --dc-bg-avatar:            #E0E0E0;
  --dc-bg-profile-hero:      #3D3D50;

  /* Text -------------------------------------------------------------------*/
  --dc-text-primary:         #212121;
  --dc-text-body:            #333333;
  --dc-text-secondary:       #666666;
  --dc-text-tertiary:        #999999;
  --dc-text-muted:           #AAAAAA;
  --dc-text-inverse:         #FFFFFF;
  --dc-text-incoming-bubble: #737373;

  /* Borders / separators ---------------------------------------------------*/
  --dc-border:               #CCCCCC;
  --dc-border-subtle:        #F0F0F0;
  --dc-border-card:          #E0E0E0;
  --dc-separator:            #E0E0E0;
  --dc-separator-strong:     #D0D0D0;

  /* Semantic ---------------------------------------------------------------*/
  --dc-success:              #4CAF50;
  --dc-warning:              #FF9800;
  --dc-error:                #F44336;
  --dc-info:                 #2196F3;
  --dc-online:               #4CAF50;
  --dc-offline:              #999999;
  --dc-away:                 #FF9800;
  --dc-busy:                 #F44336;
  --dc-unread-badge:         #F44336;

  /* Messaging --------------------------------------------------------------*/
  --dc-bubble-sent:          #2196F3;
  --dc-bubble-received:      #E5E5EA;
  --dc-bubble-text-sent:     #FFFFFF;
  --dc-bubble-text-received: #212121;
  --dc-bubble-timestamp:     #666666;
  --dc-message-status:       #4CAF50;
  --dc-message-highlight:    rgba(255,193,7,.5);
  --dc-reply-bg-incoming:    #E5E5E5;
  --dc-reply-bg-outgoing:    rgba(255,255,255,.25);
  --dc-reply-bar-bg:         #F0F0F0;

  /* Input ------------------------------------------------------------------*/
  --dc-input-bg:             #FFFFFF;
  --dc-input-text:           #212121;
  --dc-input-placeholder:    #999999;
  --dc-input-border:         #CCCCCC;
  --dc-input-border-focus:   #2196F3;
  --dc-input-reply-bg:       #F2F2F7;
  --dc-input-typing-bg:      #F2F2F7;
  --dc-input-typing-dot:     #007AFF;

  /* Settings palette (Facebook-ish, iOS) -----------------------------------*/
  --dc-settings-accent:      #007AFF;
  --dc-settings-success:     #34C759;
  --dc-settings-warning:     #FF9500;
  --dc-settings-error:       #FF3B30;
  --dc-settings-header:      #65676B;
  --dc-settings-subtitle:    #8A8D91;
  --dc-settings-border:      #E5E8EB;
  --dc-settings-separator:   #F0F2F5;

  /* Legacy gray ramp (for compatibility w/ existing XAML) ------------------*/
  --dc-gray-100:             #F5F5F5;
  --dc-gray-200:             #EEEEEE;
  --dc-gray-300:             #E0E0E0;
  --dc-gray-400:             #BDBDBD;
  --dc-gray-500:             #9E9E9E;
  --dc-gray-600:             #757575;
  --dc-gray-900:             #212121;
  --dc-gray-950:             #141414;

  /* Effects ---------------------------------------------------------------*/
  --dc-shadow-color:         rgba(0,0,0,.19);
  --dc-shadow-sm:            0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --dc-shadow-md:            0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --dc-shadow-lg:            0 16px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);
  --dc-ripple:               rgba(0,0,0,.12);
  --dc-glass-bg:             rgba(255,255,255,.25);
  --dc-selection:            rgba(33,150,243,.25);
}

/* -------- DARK theme ------------------------------------------------------
   Redesigned to match the DChat SDK docs aesthetic: inky navy-black base,
   elevated surfaces with a subtle cool tint, clean cyan accent.
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
  --dc-accent:               #58C1E8;   /* Docs cyan — primary action */
  --dc-accent-secondary:     #8AD4F0;
  --dc-accent-hover:         #7FCFEE;
  --dc-ios-blue:             #58C1E8;
  --dc-ios-blue-deep:        #2A9AC4;

  --dc-brand-cyan:           #35B5EC;
  --dc-brand-blue:           #3F76ED;
  --dc-brand-indigo:         #423EED;
  --dc-brand-violet:         #6A2EEE;
  --dc-gradient-brand:       linear-gradient(155deg, #35B5EC 0%, #3F76ED 38%, #4A3EE8 68%, #6A2EEE 100%);
  --dc-gradient-accent:      linear-gradient(135deg, #58C1E8 0%, #8AD4F0 100%);
  --dc-gradient-teal-blue:   linear-gradient(135deg, #1A7E9E 0%, #2697C3 55%, #58C1E8 100%);
  --dc-gradient-send:        linear-gradient(135deg, #58C1E8 0%, #2A9AC4 100%);
  --dc-gradient-voice:       linear-gradient(135deg, #FF453A 0%, #D70015 100%);
  --dc-gradient-attach:      linear-gradient(135deg, #32D74B 0%, #28A745 100%);

  /* Layered surfaces (darkest → lightest tint) */
  --dc-bg-primary:           #0E1116;   /* page canvas */
  --dc-bg-secondary:         #0A0D11;   /* deepest (chrome behind panels) */
  --dc-bg-tertiary:          #1A1F26;   /* hover / inset */
  --dc-bg-surface:           #141922;   /* cards, popovers */
  --dc-bg-charcoal:          #141922;
  --dc-bg-overlay:           rgba(8,10,14,.82);
  --dc-bg-avatar:            #1F2632;
  --dc-bg-profile-hero:      #141922;

  /* Text — high contrast on near-black, with a blue undertone */
  --dc-text-primary:         #E6EDF3;   /* headings, primary */
  --dc-text-body:            #CBD5E1;   /* body */
  --dc-text-secondary:       #8B96A7;   /* secondary */
  --dc-text-tertiary:        #6B7688;   /* tertiary */
  --dc-text-muted:           #4E5866;   /* muted */
  --dc-text-inverse:         #0E1116;
  --dc-text-incoming-bubble: #8B96A7;

  --dc-border:               #2A313C;
  --dc-border-subtle:        #1A1F26;
  --dc-border-card:          #222832;
  --dc-separator:            #1A1F26;
  --dc-separator-strong:     #2A313C;

  --dc-success:              #3FB950;
  --dc-warning:              #D29922;
  --dc-error:                #F85149;
  --dc-info:                 #58C1E8;
  --dc-online:               #3FB950;
  --dc-offline:              #6B7688;
  --dc-away:                 #D29922;
  --dc-busy:                 #F85149;
  --dc-unread-badge:         #F85149;

  --dc-bubble-sent:          #2A9AC4;
  --dc-bubble-received:      #1A1F26;
  --dc-bubble-text-sent:     #FFFFFF;
  --dc-bubble-text-received: #E6EDF3;
  --dc-bubble-timestamp:     #6B7688;
  --dc-message-status:       #3FB950;
  --dc-message-highlight:    rgba(88,193,232,.18);
  --dc-reply-bg-incoming:    #0E1116;
  --dc-reply-bg-outgoing:    rgba(255,255,255,.18);
  --dc-reply-bar-bg:         #1A1F26;

  --dc-input-bg:             #141922;
  --dc-input-text:           #E6EDF3;
  --dc-input-placeholder:    #6B7688;
  --dc-input-border:         #2A313C;
  --dc-input-border-focus:   #58C1E8;
  --dc-input-reply-bg:       #1A1F26;
  --dc-input-typing-bg:      #1A1F26;
  --dc-input-typing-dot:     #58C1E8;

  --dc-settings-accent:      #58A6FF;
  --dc-settings-success:     #3FB950;
  --dc-settings-warning:     #D29922;
  --dc-settings-error:       #F85149;
  --dc-settings-header:      #8B949E;
  --dc-settings-subtitle:    #6E7681;
  --dc-settings-border:      #30363D;
  --dc-settings-separator:   #21262D;

  --dc-shadow-color:         rgba(0,0,0,.5);
  --dc-shadow-sm:            0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.35);
  --dc-shadow-md:            0 4px 10px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
  --dc-shadow-lg:            0 16px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
  --dc-ripple:               rgba(255,255,255,.12);
  --dc-glass-bg:             rgba(255,255,255,.09);
  --dc-selection:            rgba(39,150,195,.25);
}

/* -------- Typography ----------------------------------------------------- */
:root {
  --dc-font-latin:   'OpenSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dc-font-arabic:  'Cairo', 'NotoSansArabic', 'OpenSans', sans-serif;
  --dc-font-icon:    'FA6Solid', 'FontAwesome', sans-serif;

  /* Sizes — taken from Styles.xaml (body 14, headline 32, sub 24, etc.) */
  --dc-fs-xs:        10px;  /* badges, small labels */
  --dc-fs-sm:        12px;  /* timestamps, filter chips, last-seen */
  --dc-fs-base:      14px;  /* default body, buttons */
  --dc-fs-md:        16px;  /* contact names, primary buttons, empty-state */
  --dc-fs-lg:        18px;  /* section headers */
  --dc-fs-xl:        24px;  /* sub-headline */
  --dc-fs-2xl:       32px;  /* headline */

  --dc-lh-tight:     1.15;
  --dc-lh-snug:      1.3;
  --dc-lh-normal:    1.45;
  --dc-lh-relaxed:   1.6;

  --dc-fw-regular:   400;
  --dc-fw-semibold:  600;
  --dc-fw-bold:      700;

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

  /* Radii — sampled from XAML CornerRadius usages */
  --dc-radius-xs:    4px;   /* chips inner */
  --dc-radius-sm:    8px;   /* buttons, search bar */
  --dc-radius-md:    12px;  /* contact list item, primary button */
  --dc-radius-lg:    16px;  /* contact section card, filter-chip active */
  --dc-radius-xl:    20px;  /* round icon buttons (40px container) */
  --dc-radius-2xl:   25px;  /* primary action gradient button (50px) */
  --dc-radius-pill:  999px; /* full pill (tags, badges) */
  --dc-radius-bubble:20px;  /* message bubble (tail-side reduced) */

  /* Control heights */
  --dc-h-tap:        44px;  /* min hit target */
  --dc-h-btn:        50px;  /* primary action */
  --dc-h-btn-sm:     44px;
  --dc-h-avatar:     48px;
  --dc-h-avatar-lg:  80px;
  --dc-h-avatar-sm:  32px;

  /* Motion */
  --dc-ease:         cubic-bezier(.4,0,.2,1);
  --dc-ease-out:     cubic-bezier(0,0,.2,1);
  --dc-dur-fast:     120ms;
  --dc-dur-base:     200ms;
  --dc-dur-slow:     320ms;
}

/* -------- Base utilities -------------------------------------------------- */
.dc-body {
  background: var(--dc-bg-secondary);
  color: var(--dc-text-primary);
  font-family: var(--dc-font-latin);
  font-size: var(--dc-fs-base);
  line-height: var(--dc-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
.dc-mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }