/* ==========================================================================
   SiratSync Design Tokens
   Single Source of Truth: app_colors.dart
   ========================================================================== */

:root {
  /* ─── Core Backgrounds (Parchment & Obsidian) ─────────────────── */
  --ss-bg-light: #FAF8F5; /* Warm parchment / cream */
  --ss-bg-dark: #1C1C1A;  /* Warm obsidian / deep charcoal */
  --ss-bg: var(--ss-bg-light);

  /* ─── Surfaces & Cards ────────────────────────────────────────── */
  --ss-surface-light: #FAF8F5;
  --ss-surface-elevated-light: #FFFFFF;
  --ss-surface-dark: #1C1C1A;
  --ss-surface-elevated-dark: #242422;

  --ss-surface: var(--ss-surface-light);
  --ss-surface-elevated: var(--ss-surface-elevated-light);

  /* ─── Typography Colors ───────────────────────────────────────── */
  --ss-text-primary-light: #2A2A25;   /* Warm deep charcoal */
  --ss-text-primary-dark: #F5F5F0;    /* Off-white */
  --ss-text-secondary-light: #6B6B60; /* Warm muted slate/gray */
  --ss-text-secondary-dark: #BFBFB5;  /* Soft warm silver/gray */
  --ss-text-tertiary-light: #9A9A8F;  /* Subtle slate */
  --ss-text-tertiary-dark: #8A8A7F;   /* Subtle gray */

  --ss-text-primary: var(--ss-text-primary-light);
  --ss-text-secondary: var(--ss-text-secondary-light);
  --ss-text-tertiary: var(--ss-text-tertiary-light);

  /* ─── Brand Accents (Islamic Bronze & Gold) ───────────────────── */
  --ss-accent-light: #8B7355;      /* Antique bronze/gold */
  --ss-accent-dark: #9D8B73;       /* Warm sand/champagne gold */
  --ss-accent: var(--ss-accent-light);
  --ss-accent-rgb: 139, 115, 85;

  --ss-gold-light: #C9A870;        /* Rich gold for highlights / ornamentation */
  --ss-gold-dark: #D4AF37;         /* Luminous gold */
  --ss-gold: var(--ss-gold-light);
  --ss-gold-rgb: 201, 168, 112;

  /* ─── Islamic Action & Habit Green ────────────────────────────── */
  --ss-green: #2E7D32;             /* Islamic emerald */
  --ss-green-dark: #4CAF50;
  --ss-green-rgb: 46, 125, 50;
  --ss-green-subtle: rgba(46, 125, 50, 0.08);

  /* ─── Ramadan Sage Accent ─────────────────────────────────────── */
  --ss-sage-light: #5A7C6A;
  --ss-sage-dark: #7A9B88;
  --ss-sage: var(--ss-sage-light);
  --ss-sage-rgb: 90, 124, 106;

  /* ─── Dividers & Borders ──────────────────────────────────────── */
  --ss-divider-light: #E8E6E2;     /* Subtle divider on light */
  --ss-divider-dark: #2A2A27;      /* Subtle divider on dark */
  --ss-border: var(--ss-divider-light);
  --ss-border-subtle: rgba(139, 115, 85, 0.16);

  /* ─── Dark Theme Surfaces ─────────────────────────────────────── */
  --ss-ai-bubble-dark: #2A2A27;

  /* ─── Semantic & Feedback Colors ──────────────────────────────── */
  --ss-success: #2E7D32;
  --ss-error: #D32F2F;
  --ss-error-light: #EF5350;
  --ss-warning: #ED6C02;
  --ss-warning-light: #FFA726;
  --ss-info: #1976D2;
  --ss-info-light: #42A5F5;

  /* ─── Curated Avatar Palette ──────────────────────────────────── */
  --ss-avatar-1: #8B7355; /* Bronze */
  --ss-avatar-2: #2E7D32; /* Islamic Emerald */
  --ss-avatar-3: #9E5A44; /* Warm Terracotta */
  --ss-avatar-4: #5A6B7C; /* Muted Slate */
  --ss-avatar-5: #B8860B; /* Antique Amber/Gold */
  --ss-avatar-6: #556B2F; /* Deep Olive */
  --ss-avatar-7: #7A6B5D; /* Warm Taupe */
  --ss-avatar-8: #5A7C6A; /* Ramadan Sage */

  /* ─── Apple-Grade Radii ───────────────────────────────────────── */
  --ss-radius-sm: 8px;
  --ss-radius-md: 14px;
  --ss-radius-lg: 20px;
  --ss-radius-xl: 28px;
  --ss-radius-pill: 9999px;

  /* ─── Apple-Grade Shadows ─────────────────────────────────────── */
  --ss-shadow-xs: 0 1px 3px rgba(42, 42, 37, 0.04);
  --ss-shadow-sm: 0 3px 10px rgba(42, 42, 37, 0.05);
  --ss-shadow-md: 0 10px 30px -4px rgba(42, 42, 37, 0.07);
  --ss-shadow-lg: 0 20px 48px -8px rgba(42, 42, 37, 0.1);
  --ss-shadow-floating: 0 30px 70px -15px rgba(28, 28, 26, 0.16);

  /* ─── Composed surfaces (derived only from the app palette) ───── */
  --ss-ink-rgb: 42, 42, 37;
  --ss-paper-rgb: 250, 248, 245;
  --ss-glass: rgba(255, 255, 255, 0.72);
  --ss-glass-strong: rgba(255, 255, 255, 0.9);
  --ss-surface-tint: rgba(139, 115, 85, 0.055);
  --ss-section-rule: rgba(139, 115, 85, 0.12);

  /* ─── Layout rhythm ──────────────────────────────────────────── */
  --ss-content-max: 1240px;
  --ss-header-height: 72px;
  --ss-space-1: 0.5rem;
  --ss-space-2: 0.75rem;
  --ss-space-3: 1rem;
  --ss-space-4: 1.5rem;
  --ss-space-5: 2rem;
  --ss-space-6: 3rem;

  /* ─── Typography Stacks ───────────────────────────────────────── */
  --ss-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --ss-font-arabic: "Amiri", "Traditional Arabic", serif;

  /* ─── Transitions & Easings ───────────────────────────────────── */
  --ss-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ss-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ss-duration-fast: 150ms;
  --ss-duration-normal: 280ms;
  --ss-duration-slow: 500ms;
}

[data-theme="dark"] {
  --ss-bg: var(--ss-bg-dark);
  --ss-surface: var(--ss-surface-dark);
  --ss-surface-elevated: var(--ss-surface-elevated-dark);
  --ss-text-primary: var(--ss-text-primary-dark);
  --ss-text-secondary: var(--ss-text-secondary-dark);
  --ss-text-tertiary: var(--ss-text-tertiary-dark);
  --ss-border: var(--ss-divider-dark);
  --ss-border-subtle: rgba(157, 139, 115, 0.22);
  --ss-accent: var(--ss-accent-dark);
  --ss-gold: var(--ss-gold-dark);
  --ss-shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.3);
  --ss-shadow-md: 0 10px 30px -4px rgba(0, 0, 0, 0.4);
  --ss-shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, 0.5);
  --ss-glass: rgba(36, 36, 34, 0.72);
  --ss-glass-strong: rgba(36, 36, 34, 0.9);
  --ss-surface-tint: rgba(157, 139, 115, 0.08);
  --ss-section-rule: rgba(157, 139, 115, 0.18);
}

/* ==========================================================================
   Motion & atmosphere tokens (additive — palette above is unchanged)
   ========================================================================== */
:root {
  color-scheme: light;

  --ss-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ss-ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ss-duration-reveal: 900ms;
  --ss-duration-ambient: 18s;

  --ss-gold-grad: linear-gradient(135deg, #B8935A 0%, #C9A870 48%, #E3CC9C 100%);
  --ss-accent-grad: linear-gradient(135deg, var(--ss-accent), var(--ss-gold));
  --ss-sheen: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  --ss-spotlight: rgba(var(--ss-gold-rgb), 0.16);
  --ss-glow-gold: 0 0 0 1px rgba(var(--ss-gold-rgb), 0.28), 0 14px 44px -10px rgba(var(--ss-gold-rgb), 0.38);
  --ss-shadow-warm: 0 18px 44px -18px rgba(var(--ss-accent-rgb), 0.35);
  --ss-scrollbar-thumb: rgba(var(--ss-accent-rgb), 0.35);
}

[data-theme="dark"] {
  color-scheme: dark;

  --ss-gold-grad: linear-gradient(135deg, #C9A24A 0%, #D4AF37 50%, #EBD58B 100%);
  --ss-sheen: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  --ss-spotlight: rgba(212, 175, 55, 0.13);
  --ss-glow-gold: 0 0 0 1px rgba(212, 175, 55, 0.3), 0 14px 44px -10px rgba(212, 175, 55, 0.3);
  --ss-shadow-warm: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
  --ss-scrollbar-thumb: rgba(157, 139, 115, 0.45);
}