/* ============================================================
   DESIGN SYSTEM – Deep Blue · iOS 18 · app.wethilb.de
   ============================================================ */

:root {
  /* ── iOS 18 System Colors ── */
  --ios-blue:        #0A84FF;
  --ios-blue-hover:  #0070E0;
  --ios-indigo:      #5E5CE6;
  --ios-purple:      #BF5AF2;
  --ios-pink:        #FF375F;
  --ios-red:         #FF453A;
  --ios-orange:      #FF9F0A;
  --ios-yellow:      #FFD60A;
  --ios-green:       #30D158;
  --ios-teal:        #40CBE0;
  --ios-cyan:        #64D2FF;

  /* ── Accent – iOS Blue ── */
  --accent:          #0A84FF;
  --accent-hover:    #0070E0;
  --accent-light:    rgba(10,132,255,.18);
  --accent-glow:     rgba(10,132,255,.35);

  /* ── Deep Blue Dark Backgrounds ── */
  --bg-base:         #020810;   /* near-black, deep blue */
  --bg-surface:      #060D1A;   /* very dark blue */
  --bg-card:         #0C1628;   /* dark navy card */
  --bg-card-hover:   #112035;   /* slightly lighter navy */
  --bg-input:        #060D1A;   /* input background */
  --bg-modal:        #0C1628;
  --bg-overlay:      rgba(2,8,16,.70);
  --bg-sidebar:      #060D1A;
  --bg-nav:          rgba(6,13,26,.90);

  /* ── Blue-tinted Text ── */
  --text-primary:    #D8E8FF;   /* cool blue-white */
  --text-secondary:  rgba(160,195,255,.70);
  --text-muted:      rgba(100,145,210,.45);
  --text-inverse:    #020810;

  /* ── Blue Borders ── */
  --border:          rgba(30,80,180,.30);
  --border-focus:    rgba(10,132,255,.80);
  --border-strong:   rgba(40,100,200,.50);

  /* ── Blue-tinted Shadows ── */
  --shadow-sm:       0 1px 4px rgba(2,8,16,.60), 0 1px 2px rgba(10,50,150,.25);
  --shadow-md:       0 4px 20px rgba(2,8,16,.70), 0 2px 8px rgba(10,50,150,.30);
  --shadow-lg:       0 10px 44px rgba(2,8,16,.80), 0 4px 16px rgba(10,50,150,.35);
  --shadow-accent:   0 4px 24px rgba(10,132,255,.45);

  /* ── Status Colors ── */
  --success:         #30D158;
  --success-bg:      rgba(48,209,88,.14);
  --warning:         #FF9F0A;
  --warning-bg:      rgba(255,159,10,.14);
  --danger:          #FF453A;
  --danger-bg:       rgba(255,69,58,.14);
  --info:            #64D2FF;
  --info-bg:         rgba(100,210,255,.14);

  /* ── Profile Colors (16, no white) ── */
  --profile-red:     #FF453A;
  --profile-orange:  #FF9F0A;
  --profile-amber:   #FFD60A;
  --profile-yellow:  #FFE426;
  --profile-lime:    #A3E635;
  --profile-green:   #30D158;
  --profile-teal:    #40CBE0;
  --profile-cyan:    #64D2FF;
  --profile-sky:     #0A84FF;
  --profile-blue:    #0A84FF;
  --profile-indigo:  #5E5CE6;
  --profile-violet:  #BF5AF2;
  --profile-purple:  #9B59B6;
  --profile-pink:    #FF375F;
  --profile-rose:    #FF2D55;
  --profile-slate:   #3A5A80;

  /* ── Typography – SF Pro stack ── */
  --font-sans: -apple-system, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   .75rem;
  --text-sm:   .8125rem;
  --text-base: .9375rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.1875rem;
  --text-2xl:  1.375rem;
  --text-3xl:  1.75rem;
  --text-4xl:  2.125rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   590;
  --fw-bold:   700;

  /* ── Spacing (8pt grid) ── */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── Radii ── */
  --r-sm:   .5rem;
  --r-md:   .75rem;
  --r-lg:   1rem;
  --r-xl:   1.25rem;
  --r-2xl:  1.75rem;
  --r-full: 9999px;

  /* ── Transitions ── */
  --t-fast:   200ms cubic-bezier(0.25,0.46,0.45,0.94);
  --t-normal: 350ms cubic-bezier(0.25,0.46,0.45,0.94);
  --t-slow:   500ms cubic-bezier(0.25,0.46,0.45,0.94);
  --t-spring: 400ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Layout ── */
  --sidebar-w:    320px;
  --nav-h:        52px;
  --bottom-nav-h: 49px;
  --content-max:  1200px;
  --card-gap:     .75rem;

  /* ── Blur / Vibrancy ── */
  --blur-nav:   saturate(200%) blur(24px);
  --blur-modal: saturate(180%) blur(40px);
  --blur-card:  saturate(150%) blur(12px);
}

/* ── Blue-tinted Light Mode ── */
[data-theme="light"] {
  --bg-base:       #E8F0FF;   /* light blue-tinted background */
  --bg-surface:    #F0F5FF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #E8F0FF;
  --bg-input:      #F0F5FF;
  --bg-modal:      #FFFFFF;
  --bg-overlay:    rgba(2,8,40,.38);
  --bg-sidebar:    #F0F5FF;
  --bg-nav:        rgba(240,245,255,.90);

  --text-primary:   #020D2E;   /* deep navy text */
  --text-secondary: rgba(10,40,120,.65);
  --text-muted:     rgba(30,70,160,.40);
  --text-inverse:   #FFFFFF;

  --border:        rgba(30,80,200,.15);
  --border-strong: rgba(30,80,200,.28);

  --shadow-sm: 0 1px 3px rgba(10,30,120,.08), 0 1px 2px rgba(10,30,120,.05);
  --shadow-md: 0 4px 16px rgba(10,30,120,.12), 0 2px 6px rgba(10,30,120,.07);
  --shadow-lg: 0 10px 40px rgba(10,30,120,.16), 0 4px 12px rgba(10,30,120,.09);

  --accent:       #007AFF;
  --accent-hover: #0062CC;
  --accent-light: rgba(0,122,255,.13);
  --accent-glow:  rgba(0,122,255,.28);

  --success: #34C759;
  --danger:  #FF3B30;
  --warning: #FF9500;
  --info:    #5AC8FA;
}