ios-projects/react/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@font-face {
  font-family: "Roboto-Regular_1";
  src: url("/fonts/Roboto-Regular_1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@theme inline {
  --font-sans: var(--fontSans);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --shadow-x: var(--shadow-x);
  --shadow-y: var(--shadow-y);
  --shadow-blur: var(--shadow-blur);
  --shadow-spread: var(--shadow-spread);
  --shadow-color: var(--shadow-color);
  /* ZhiXi Brand Colors */
  --color-brand-primary: var(--brand-primary);
  --color-brand-secondary: var(--brand-secondary);
  --color-brand-accent: var(--brand-accent);
  --color-brand-surface: var(--brand-surface);
  --color-brand-surface2: var(--brand-surface2);
  --color-brand-border: var(--brand-border);
  --color-brand-text: var(--brand-text);
  --color-brand-text2: var(--brand-text2);
  --color-brand-text3: var(--brand-text3);
  --color-brand-orange: var(--brand-orange);
  --color-brand-purple: var(--brand-purple);
  --color-brand-teal: var(--brand-teal);
  --color-brand-green: var(--brand-green);
}

:root {
  --fontSans: "Inter", "Roboto-Regular_1", sans-serif;
  --radius: 0.75rem;

  /* ZhiXi Brand - Deep Dark Theme */
  --brand-primary: #7C6EFA;
  --brand-secondary: #F97316;
  --brand-accent: #A78BFA;
  --brand-surface: #0F0F1A;
  --brand-surface2: #1A1A2E;
  --brand-border: rgba(255,255,255,0.08);
  --brand-text: #F0F0FF;
  --brand-text2: rgba(240,240,255,0.6);
  --brand-text3: rgba(240,240,255,0.35);
  --brand-orange: #F97316;
  --brand-purple: #7C6EFA;
  --brand-teal: #2DD4BF;
  --brand-green: #34D399;

  --background: #0F0F1A;
  --foreground: #F0F0FF;
  --card: #1A1A2E;
  --card-foreground: #F0F0FF;
  --popover: #1A1A2E;
  --popover-foreground: #F0F0FF;
  --primary: #7C6EFA;
  --primary-foreground: #ffffff;
  --secondary: #252540;
  --secondary-foreground: #F0F0FF;
  --muted: #1E1E32;
  --muted-foreground: rgba(240,240,255,0.5);
  --accent: #2A2A45;
  --accent-foreground: #F0F0FF;
  --destructive: #EF4444;
  --destructive-foreground: #ffffff;
  --border: rgba(255,255,255,0.08);
  --input: rgba(255,255,255,0.08);
  --ring: #7C6EFA;
  --chart-1: #7C6EFA;
  --chart-2: #F97316;
  --chart-3: #2DD4BF;
  --chart-4: #F59E0B;
  --chart-5: #34D399;
  --sidebar: #13132A;
  --sidebar-foreground: #F0F0FF;
  --sidebar-primary: #7C6EFA;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #252540;
  --sidebar-accent-foreground: #F0F0FF;
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-ring: #7C6EFA;
  --shadow-blur: 24px;
  --shadow-x: 0px;
  --shadow-y: 8px;
  --shadow-spread: 0px;
  --shadow-color: rgba(0,0,0,0.4);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    box-sizing: border-box;
  }
  body {
    @apply bg-background text-foreground font-sans;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer utilities {
  .shadow-custom {
    box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
  }

  /* ZhiXi Gradient Utilities */
  .bg-brand-gradient {
    background: linear-gradient(135deg, #7C6EFA 0%, #A78BFA 50%, #F97316 100%);
  }
  .bg-brand-gradient-dark {
    background: linear-gradient(180deg, #1A1835 0%, #0F0F1A 100%);
  }
  .bg-ai-glow {
    background: radial-gradient(ellipse at top, rgba(124,110,250,0.3) 0%, transparent 60%);
  }
  .text-brand-gradient {
    background: linear-gradient(135deg, #A78BFA 0%, #F97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .glass-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
  }
  .glass-card-light {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
  }
  .glow-purple {
    box-shadow: 0 0 24px rgba(124,110,250,0.4);
  }
  .glow-orange {
    box-shadow: 0 0 24px rgba(249,115,22,0.4);
  }
  .tab-bar-bg {
    background: rgba(15,15,26,0.95);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
  }
  .status-bar-height {
    height: 44px;
  }
  .home-indicator-height {
    height: 34px;
  }
}